Swapping Multiple Images While Rollingover One Image?
May 18, 2009
Newbie here. I am seeking to swap out three images when rolling over one. Cursor hovers over one image - three new images, in different locations, are seen on screen. When cursor moves away - the images revert to "normal" state.
Image 1 - thumbnail - bottom right of screen
When rolling over Image 1, three images change:
Image 1 - to shaded version of the thumbnail
Image 2 - main image center of screen
Image 3 - text box image top right of screen
What I'm looking to do is have a folder of images that I have show up on my website.I'm also looking to pull from this folder up to 6 or 7 times on the same page w/ randomized pictures that do not repeat.Finally, I'm looking to be able to size and name these images based on which image randomly pulls. b/c it's not grabbing the images.
I know this is sorta reposting but I want to simplify the issue a bit. Take the following script:
function replacemain(s){ var x = document.images['MainImage']; var y = document.images[s]; var pictemp = x.src; x.src = y.src; y.src = pictemp; }
All I want to do is replace the image specified as "s" with the MainImage. Actually swap them so that each execution of the function will swapp and reswap the images without loosing anything. This generally works, however, on a couple IE6 browsers it causes blank images to swap in....
I've got a JavaScript / CSS question if anyone has a spare minute and the interest? I've got a page with a background image set by CSS. I want to use a Javascript function to change that image with a link click. Here's a snippet from my HTML:
HTML Code: <body> <script type="text/javascript" src="changeBGimage.js"></script> <style type="text/css"> body {background: url('red.jpg') no-repeat} </style>
[Code]...
Would you be able to tell me how I would structure that function?
I need to create a page containing five image tags, two buttons, a <select> and a <textarea>. The images tags will each contain a picture of one of six possible outcomes for the dice portraying the numbers one through six..
The first button: When the user clicks on the button, all dice are rolled once. For each die when rolled, the src of its image tag is replaced with a random one of six possible pictures -- each picture being chosen with equal probability (1/6).... I HAVE THIS DONE
The select: The user may select any of the numbers one through six. Whenever a picture is clicked upon, then that die takes on the value shown inside the <select> THIS IS WHAT I NEED HELP WITH
The textarea: Results of the dice rolls should be kept as a running log (a cumulative history) in a textarea at the bottom of the page. With each roll (initiated by the click of the button), we should be able to see the complete history of all current and previous dice rolls. You need not consider changes brought about clicks on individual dice in conjunction with the <select>....I HAVE THIS DONE
The second button: A button below the textarea, should allow the user to obtain a report (overwriting the current contents of the log in the textarea) which tabulates the frequency of each of the six outcomes plotted separately for each of the dice. The frequency tabulation should show how often each die was rolled, as consistent with the data stored in the log..
I have an image inside of a div that I'd like to swap every time the function is triggered. I was able to attach first image through this: Code JavaScript: this.titlecontainer.appendChild(document.createElement('img')).src = 'images/picture' + padded_index + '-t.png';
This indeed does add another image on each function iteration but as the code suggests, it actually APPENDS additional images. Instead, I'd like to SWAP the existing image for a new one. My guess is to remove what's currently loaded inside the div prior to appending another one. What would the line preceding the above have to look like to accomplish removing of the content?
What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position?
I've run into a problem with swapping images for site navigation.The "hover" part works just fine, but the problem lies within the click part. When the user clicks the first thing that happens is to reset all of the images for all of the links, and then set the hover image for the link that was clicked. However it seems that after resetting all of the images 'src' attributes, the code for setting the link that was clicked either doesn't execute, or executes before the reset.
working on a feature that displays 3 news stories. The stories are accessed by 3 buttons on the top, sort of like a tab-style navigation. The catch is that all 3 stories are on the same html page, the "navigation" is just showing/hiding content based on Java, CSS & div's. Where I'm stuck is creating On/Off state for the tab buttons. What I'd like to do is:
Naturally I have separate version of each button for the on/off state, I'm just not sure how to initiate the swap...Do I set a JS variable on the onclick? Or is it just a function?
What I would like to do is enable swapping between the black images? I would like to drag and drop to another image and that image will fill up the dragged earlier image position?
I am trying to create a menu that would look and act like this image illustrates: [URL] Essentially the three boxes slide down when rolled over and menu items appear in the portion that has slid down.So far, I have figured out how to make an image slide using jQuery: [URL]
Want to swap multiple divs using onclick. Understanding of js is cursory. The way its set up now is when you click it hides a pre-specified div-this causes issues because you dont know which div the user is going to be on and if the user is on a different div then one specified it hides random divs. I want to hide the 'active' div. Heres the code. In head:
Code: <script type="text/javascript" language="JavaScript"><!-- function HideDIV(d) { document.getElementById(d).style.display = "none"; } function DisplayDIV(d) { document.getElementById(d).style.display = "block"; } //--></script>
I have a site which requires the user to upload multiple images at once. Using jQuery I have set it up so that the user can select individuals individually (using the file browser) and then upload them all at the same time bty clicking 'Upload'. However, this is not really good enough...
What I need to happen is that when the user browses their machine to select their images, they are able to select multiple images through CTRL+click. At the minute they can only select one image at a time. How can this be achieved?
As I already have the upload process working perfectly, I would prefer that I was able to keep this intact and simply add some javascript which allowed multiple images to be selected by the file browser at the same time. I would also prefer, if possible, not to use flash.
I'm hoping that there is a simple script that can rotate images and text links on a page, always showing perhaps 5 or 10 images although in a different order every time. This would be used to equalize ads on a few of my sites, an example can be seen here Code:
okay, now i know this is probably really easy, but i have about a 2% knowledge of javascript (i know i should learn it)
anyway what im after is something that will do the following
i have 1 image that is 160x106 pixels, on the other side of the page i have 5 thumbnails (16x10pixels) now when somebody clicks on one of the 5 thumbnails i want the full size version of that picture to apear where the 160x106 picture is...
I have a simple navigation bar using an ul with images.
I have the following script that swaps out the images on mouseover and mouseout to create "hover" effect.
The issue is when I try to set the src attribute of the image that has been clicked the image does not change. The first part of the click event is working and resets the src of all the images as expected, but the second part that sets the src for the image clicked does not either run or runs before the reset.
I have a site which requires the user to upload multiple images at once. Using jQuery I have set it up so that the user can select individuals individually (using the file browser) and then upload them all at the same time bty clicking 'Upload'. However, this is not really good enough...
What I need to happen is that when the user browses their machine to select their images, they are able to select multiple images through CTRL+click. At the minute they can only select one image at a time.
As I already have the upload process working perfectly, I would prefer that I was able to keep this intact and simply add some javascript which allowed multiple images to be selected by the file browser at the same time. I would also prefer, if possible, not to use flash.
I've created a javascript version of the classic game SOKOBAN. Basically what happens is you move the man around the "warehouse" and he must push the boxes into the target area. Copy the code and try it yourself to see what I have so far (note-he can't move the boxes yet).
My question is: Right now, my map consists of solid color blocks. What I WANT them to be is image files (for example: box.png, wall.png, floor.png) to add a little versatility and life to the map. I am not sure how to make this switch though. I suspect I make the change somewhere in the tile array in the initialize function, but I am not sure what..
Also, how can I get the boxes to actually MOVE? I.e. when my man pushes them, they move around in the direction he pushes?
I need to refresh multiple images on my site. So every time the page gets refreshed the images need to change. It worked fine with the script below, but this is only related to 1 image
I tried to copy the script and change the "ID's" but this does not do the job.
I have a number of images placed on a map (the images are dots indicating a location)
When clicked, that displays different textual information somewhere on the page. View here and click the dots on the map for what I am trying to explain: [url]
What I want to do now is to toggle these dots so that when clicked, the dot turns white. This I could do with some code I found on the net. However, I need it to toggle all images. In that if one image has been clicked and turned white, and then the user clicks a different black ot, then that black dot should turn white, and the white dot should turn back clack.
I am trying to make different images hover over a table of sliced images when you mouse over a particular image. ex. mouse over image 1 = have image 1.1 hover over entire table of images in spot A; mouse over image 2 = have image 2.2 hover over entire table of images in spot B....ect. what i have so far only allows me to mouse over image 1 and have image 1.1 hover over entire table in spot A. Any time i try to move forward with more div's on other images it just jacks everything up.
i used setTimeout() function in my image gallery to scroll images , i used setTimeout("myfunction()",1) in my script. Now my image gallery is working properly but problem is that the speed of scrolling images if normal in firefox, but in internet explorer it is slow, and in google chrome it is very fast , Sir how to resolve this problem
I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen.
I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below:
I am using jquery with the cookie plugin and I have multiple image buttons that can hide/show multiple elements. My question is how can I add a cookie to this code to remember whether each separate element is opened or closed?
The code, $(document).ready(function() { // choose text for the show/hide link - can contain HTML (e.g. an image) var showText='<div class="expanddown"></div>'; var hideText='<div class="expandup"></div>'; // initialise the visibility check var is_visible = false; // append show/hide links to the element directly preceding the element with a class of "toggle" $('.toggle').prev().append('<a href="#" class="togglelink">'+hideText+'</a>'); // capture clicks on the toggle links $('a.togglelink').click(function() { // switch visibility is_visible = !is_visible; // change the link depending on whether the element is shown or hidden $(this).html( (!is_visible) ? hideText : showText); // toggle the display - uncomment the next line for a basic "accordion" style //$('.toggle').hide();$('a.toggleLink').html(showText); $(this).parent().next('.toggle').slideToggle('fast'); // return false so any link destination is not followed return false; }); }); HTML, <a class="togglelink" href="#"></a> <div class="toggle"> Content </div>
