Switching images (javascript)
On hover
This switches divs. The idea is explained here.
This is some wine.
This is some beer.
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 #2 #3your 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
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!
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...
Sheng,
I can offer you the onclick version. It's a bit dodgy in IE6, but then, isn't everything?
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!
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.
Thanks, this saved me a world of hurt.
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
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.
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.
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.
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
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???
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');"> <img height=60 alt=wine src="data/wine.jpg" width=60></A>
<LI><A onmouseover="switch1('two');"> <img height=60 alt=wine src="data/beer.jpg" width=60></A>
<LI><A onmouseover="switch1('three');"> <img height=60 alt=wine src="data/whisky.jpg" width=60></A> </LI></UL>
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/
Scott,
What seems to be the problem? The code is all there.
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
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!!!
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
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.
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.
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?
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
Does this work with video and if not what would you recomend?
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.
why beer as background image??????????
abc,
What's wrong with beer? If you'd rather have wine or sake, there's a style switcher on the home page.
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.
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...
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?
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?
Allon,
Sorry. I'm a little confused. Can you explain it a little more or show me an example?
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...
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.
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
Wow, you rock!
Thanks!!!
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?
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.
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!
tbagwell,
About the loop - yeah, just choose a letter - say 'i' for 'image' or 'p' for picture - and add a number after that.
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!
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!
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.)
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!
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.
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.
salsamama10,
I would need to see your page to say what's wrong.
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?
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.
cruel angel's thesis chords <a href="https://thesismethyl.com/ ">thesis hotel</a> informative speech thesis statement
northwestern supplement essay <a href="https://essaymerino.com/ ">apply texas essay prompts</a> synthesis essay thesis examples
argumentative research essay <a href="https://essaymerrily.com/ ">introduction of an essay</a> how to quote a quote in an essay
generic name for furosemide <a href="https://lasixona.com/ ">does furosemide cause hypokalemia</a> torsemide vs furosemide
tips taking metformin <a href="https://metforminynd.com/ ">metformin achy legs</a> metformin chest pressure
Good day! This is kind of off topic but I need some guidance frpm an established blog.
Is itt tough to set up your own blog? I'm
not very techincal but I can figure things out pretty quick.
I'm thinking about setting up my oown bbut I'm not sure where to begin. Do you have any
tips or suggestions? Thankscrdypto banter
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.