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.
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.