Switching images (javascript)

On hover

This switches divs. The idea is explained here.

wine

This is some wine.

beer

This is some beer.

whisky

This is some whisky.

On click

This switches the src value of one base image. This is very simple - only 2 lines of javascript.

Javascript
function switch1(div) {
if (document.getElementById('one')) {
var option=['one','two','three'];
for(var i=0; i<option.length; i++)
{ obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div)? "block" : "none"; }
}
}
//
function switchImg(i){
document.images["wine"].src = i;
}
HTML
<h1>Switching images (javascript)</h1>
<div id="image-switch">
<h2>On hover</h2>
<p>This switches divs. The idea is explained <a href="br.php?page=switchcontent">here</a>.</p>
<div class="fright">
<div id="one">
<img src="wine.jpg" height="100" width="100" alt="wine" />
<p>This is some wine.</p>
</div>
<div id="two">
<img src="beer.jpg" height="100" width="100" alt="beer" />
<p>This is some beer.</p>
</div>
<div id="three">
<img src="whisky.jpg" height="100" width="100" alt="whisky" />
<p>This is some whisky.</p>
</div>
</div>
<ul>
<li><a onmouseover="switch1('one');">Wine</a></li>
<li><a onmouseover="switch1('two');">Beer</a></li>
<li><a onmouseover="switch1('three');">Whisky</a></li>
</ul>
<h2>On click</h2>
<p>This switches the src value of one base image. This is very simple - only 2 lines of javascript.</p>
<div class="fright"><img src="wine.jpg" id="wine" height="100" width="100" alt="" /></div>

<ul id="radiobs">
<li><a href="#n" onclick="switchImg('wine.jpg')">Wine</a></li>
<li><a href="#n" onclick="switchImg('beer.jpg')">Beer</a></li>
<li><a href="#n" onclick="switchImg('whisky.jpg')">Whisky</a></li>
</ul>

</div>
<div class="clear"></div>
CSS
#image-switch ul {
margin:0 0 0 20px;
color:red;
list-style-type:none;
}
#image-switch li {
padding:10px;
}
#image-switch #two, #image-switch #three {
display:none;
}
#radiobs {
width:150px;
position:relative;
margin:0;
}
#radiobs input {
margin:0;
padding:0;
position:absolute;
margin-left:6em;
width:15px;
}

Comments

#1
2005-11-08 morgen says :

what if im trying to link a small picture on the side of a page to a larger picture in the center of the page without switching to a totally different page.
sorry if that doesnt make sense.

#2
2005-11-08 BonRouge says :

Do you mean like this?
Or maybe like this?

#3
2006-04-14 sheng says :

your codes are great but i couldn't figure it out where to put it....please help me...I have this friendster thing and i want to put the first on-hover thingy but you got html,css and java codes.Which one will i use and where will i put?(i got html box and css box on friendster)

inangky@yahoo.com

#4
2006-04-14 BonRouge says :

sheng,
I don't think you're allowed to use javascript on Friendsters. You may want to use something like this instead.

By the way, there are some very friendly and helpful people at CSS Creator who like helping people with Friendsters problems.

Good Luck!

#5
2006-04-15 Sheng says :

Thanks for the code but i really love that switching image thingy...couldn't u simplify the codes using html and css only?CSS Creator have the basic stuffs...

#6
2006-04-15 BonRouge says :

Sheng,
I can offer you the onclick version. It's a bit dodgy in IE6, but then, isn't everything?

#7
2006-08-25 brianna says :

Hi! When I use this tutorial, it makes the images show up above the text links, rather then to the right of them as in the above example - why would that happen? I copied all the Jscript and Css and HTML exactly. Thanks!

#8
2006-08-26 BonRouge says :

Brianna,
See below the menu on the left? There's a button that says 'Create page'. Click that. You'll have a pge with only the CSS, javascript and html necessary for the demo. Use the 'save as' function of your browser. You'll be OK then.

#9
2006-10-07 musicemissions says :

Thanks, this saved me a world of hurt.

#10
2006-11-14 Elisa says :

hi um i wanted to use this on myspace is that possiable to have like my friends name and the when u go over it with ur mouse the pic pops up on the side, plz and thank u if u can help me

#11
2006-11-16 BonRouge says :

Elisa,
I'm not sure, but I don't think you can use javascript on myspace. Here's something with CSS that might help. You'd just need to switch it around.

#12
2007-01-03 Dominick says :

Hi BonRouge,

I really like what you posted in a previous thread. "Or maybe like this?" Can I use that in Myspace? I know they dont allow Javascript. Is there a way to create a photo slideshow like that using html or css? Please let me know.

#13
2007-01-04 BonRouge says :

Dominick,
If you look at the code of that page, you'll see that there's no javascript involved. It's just HTML and CSS.

#14
2007-01-08 webguy says :

what if instead of switching between just images say i had thumbnails of images and video and when i clicked on them it brought up a bigger image or autoplayed the video in the center like what morgen was describing in the first commment. how would i do that

#15
2007-08-30 SpencerD says :

Hi BonRouge,
What a great script this is. I see as a way to solve a problem I have for switching (A) Background on rollover (B) Switch text like the example in your switching content and (C) By selecting to "Click" on any of the rollover links. link to a new page.

I tried to do that here but the small images wont stack over the background image and can't get the on click to link to a new page. can this be done???


#16
2007-08-30 SpencerD says :

Here is what I tried


<DIV id=one><IMG height=260 width=750 alt=wine src="data/wine.jpg"></DIV>
<DIV id=two><IMG height=260 width=750 alt=beer src="data/beer.jpg" width=100></DIV>
<DIV id=three><IMG height=260 width=750 alt=whisky src="data/whisky.jpg" width=100>

<LI><A onmouseover="switch1('one');">&nbsp;&nbsp;&nbsp;<img height=60 alt=wine src="data/wine.jpg" width=60></A>
<LI><A onmouseover="switch1('two');">&nbsp;&nbsp;&nbsp;<img height=60 alt=wine src="data/beer.jpg" width=60></A>
<LI><A onmouseover="switch1('three');">&nbsp;&nbsp;&nbsp;<img height=60 alt=wine src="data/whisky.jpg" width=60></A> </LI></UL>


#17
2008-07-09 Scott says :

hey could anyone find me the script for there imageswitch

at the top of the page i would so like my for site but it been really hard to find the codes

http://www.stumpradio.nathanbooth.co.uk/


#18
2008-07-09 BonRouge says :

Scott,
What seems to be the problem? The code is all there.

#19
2008-07-10 scott says :

im abit new to this

i tryed using the script in plan html


now do i have to save all the box in diffrent files and do they have names i have to call the files or does it go in one html doc

#20
2008-07-10 Aaron says :

This is great. Now what if you had a fourth image that was preloaded as the "default". Let say - SODA.

So you started with an image of Soda, with your clickable options on the left ("wine" "beer" and "whiskey"). Clicking on wine would show the wine image and the text link "wine" would now be swapped with "soda" (as the wine option is already loaded).

How would you do that????

This is a great thread - VERY helpful.

THANKS!!!

#21
2008-07-10 scott says :

BonRouge says :

Scott,
What seems to be the problem? The code is all there.


and oh thats not my site that is someone elses i just like how they have done it and wanted to know if u could get the script for me

#22
2008-08-05 m. says :

Hi, would it be possible to modify this code to switch out text instead of images? I was able to do this in CSS, but it doesn't work in Safari, so I'm trying to modify this JavaScript to switch out text instead of images. Unfortunately I'm a bit rusty on JavaScript! Any advice would be greatly appreciated.

#23
2008-08-05 BonRouge says :

m.,
Yes, the first script up there (switch1()) actually does what you're asking about. It switches divs (or any other kind of element really). You can put text in divs. For the example up there, I used an image with a little text below it, but you don't need the image.

#24
2008-10-16 kaitco says :

Is there a way to edit the javascript so that I could use the onclick version multiple times throughout a single page and still have the page validate?

#25
2008-10-23 Felix says :

It worked! Thank you so much. I have been surfing the internet for hours searching a solution. You brought me one. I m so thankful!
mourique.net

#26
2008-10-31 Dan says :

Does this work with video and if not what would you recomend?

#27
2009-03-10 Artman Matt says :

My portfolio looks great and works smoothly thanks to you!
I switch divs for various feeds of image galleries and project information.
HOWEVER, with a lot of text in the single home page, there is a 10 second load time and some load confusion on slower or non-firefox clients.
I'm working on an onload event to hide/show relevant content behind a "loading" screen div. I'm also thinking maybe I should go PHP someday when the content gets too heavy and unmanageable for one file. My home.hmtl is currently ~80kb.

Thanks again, Matt.

#28
2011-12-12 abc says :

why beer as background image??????????

#29
2011-12-12 BonRouge says :

abc,
What's wrong with beer? If you'd rather have wine or sake, there's a style switcher on the home page.

#30
2011-12-21 Shea says :

Thanks for this code! I know it's an old posting, but I needed it today. It was the first one that I came across that didn't boggle my designer brain.

#31
2011-12-26 Allon says :

Is there a way to make the function more dynamic? I would like to have the same functionality many time for 3-5 objects per occurrence in the page and I dont want to have to add 50 options to the javascript...

#32
2011-12-27 Allon says :

Ok, I actually found a way of doing it by making the div id's different and then splitting the names in the function.

Is there an easy way of making onclick images change when clicked and change back to original when a different one is clicked?

#33
2011-12-27 BonRouge says :

Allon,
Let me know if this helps you.

#34
2012-02-01 Allon says :

Thanks so much for the reply and sorry for the delay in replying, I didnt check this link. I appreciate your help. Actually I am doing something with divs not li's and I need to underline and un-underline text and change three images based on what was clicked. I couldnt manipulate your code for that. Any ideas?

#35
2012-02-01 BonRouge says :

Allon,
Sorry. I'm a little confused. Can you explain it a little more or show me an example?

#36
2012-02-05 Allon says :

Sure, on this page look in the div you will see a text link and three icons. The first 2 icons change the content of the div as well as the text link.
real estate colleges

I need the text link to be active as it is a H tag and is important...

#37
2012-02-07 BonRouge says :

Allon,
Please have a look here.

Please look at the files. You can see that I added id tags to the three elements, made a couple of images for the change and added some lines to the switch1() function.

I hope it helps. Let me know if you have any questions.

#38
2012-02-07 Jay says :

hello

i need to make a javascript for like a image quiz, its about 2 choices that depending on which you click it should switch to the right image (correct or incorrect) for each question, its about 5questions and each have correct or incorrect displays

heres a link
http://deccasapanama.com/zyr/ss.html

#39
2012-02-13 Allon says :

Wow, you rock!

Thanks!!!

#40
2012-02-25 tbagwell says :

BonRouge you are a lifesaver! Before, I was looking for a way to do this using only css & php. Do you think its safe to use javascripts because most browsers have them enabled as a default?

#41
2012-02-25 BonRouge says :

tbagwell,
What can I say? I think most browsers, most of the time, have javascript enabled. If you look at the code of an average popular site, there's some javascript in there somewhere. I think where you need to be careful is with things that are essential - make sure that the site basically works without the javascript. So, if you use it for a menu, for example, have the javascript hide the sub-menus, but make sure those sub-menus can be see when javascript is disabled. On this page here for example, clicking 'javascript' in the navigation on the left will the list to show the javascript pages, but if javascript is disabled, the list of javascript pages appears on the right in the middle of the page like a normal page. It's not beautiful, but the site still functions without javascript (except of course for all the javascript examples!)
I hope that helps a little.

#42
2012-02-25 tbagwell says :

got it! ill keep that in mind. i'll just minimize those javascripts and only use them only when needed. great work on the Cheers pic example. that's exactly what i want to do with my site... but im still trying to figure out how to put those
<li><a onmouseover="switch1('one');">Wine</a></li>
in a php while loop.. any ideas on how i could increment 'one' into 'two' into 'three' and so forth?
cheers!

#43
2012-02-25 BonRouge says :

tbagwell,
About the loop - yeah, just choose a letter - say 'i' for 'image' or 'p' for picture - and add a number after that.

#44
2012-02-26 tbagwell says :

Success! I was banging my head against the wall all weekend and i finally got the effect i wanted!, i did what you said and use a letter as an index to the divs. i was trying ifs statements with the While but I got it working eventually with a switch-case statement instead.
Thanks BonRouge! You are the man!

#45
2012-03-04 tbagwell says :

Hey Bon, one last thing, what if the image of the beer on this switching images example was deleted or missing for some reason, hovering the mouse makes the switch go haywire (hovering on the wine is ok but, hovering on the whisky thumb makes the screen go blank ), how do you make it so that if beer.jpg was not present, skip the beer, and proceed to whisky, and display the remaining to images properly? thanks bro!

#46
2012-03-11 BonRouge says :

tbagwell,
You'll need some server side script, such as PHP, to do that. Javascript can't check the file system to see if the files are there, because it works in the browser rather than on the server, where the files are.
Do you use PHP? (I don't know much about other server-side scripts.)

#47
2012-03-18 tbagwell says :

Thanks for the advise, you're right, no js needed! All it needed was a few tweaks in my php and sql. Here's what i did, since my image paths are in a mysql table with a 'position' column, i simply updated the position number each time a delete occured. Its not the best solution but it worked. Cheers!

#48
2012-04-09 tbagwell says :

Hey bonrouge!
is there a way to make those image switching more dramatic? Can the switch be done more smoothly so that when you clicked on the link, it sort of fades away before the next image is shown. just like the one on ebays homepage where we click the numbers 1 2 3 4.

#49
2012-05-24 salsamama10 says :

Hi, BonRouge. Your tips and tricks are really helpful thank you. I am trying to use your onclick solution to build a simple map which has four images that when you click on the right link in the legend box, the image changes and shows dots on each map. (I would use google maps instead but we don't know the coordinates.)

When I used your onclick method above. I got each item but my image wouldn't change when I clicked on the link.

#50
2012-05-24 BonRouge says :

salsamama10,
I would need to see your page to say what's wrong.

#51
2012-10-16 Bonnie says :

Hi BonRouge,
Is there a way to show images instead of words and when you click or hover over a smaller thumbnail it opens up and replaces a bigger picture. Meaning if I have one main large picture with 4 underneath it, when you hover or click on one of the 4 smaller pictures it will replace the existing big picture above it?

#52
2013-08-13 Marc says :

I'm making a site that has a cartoony look to it and
I'm trying to get a link that when clicked displays two divs each with an image in it, the example for the forign languuage changed the paragraph displayed in multiple divs, but this isn't what i need. is there an if statment that could read if div "one" is showing also display div "x" , "y" and "x"? and if so how would i go about it, HELP ME PLEASE been trying all sorts all week.

Comment form

Please type the word 'wolf' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url