Layout: Images and Rollovers

started by Anders Wick on Jan 27, 2008 — RSS Feed

Anders Wick Anders Wick
Posts: 5

Hey, does anybody know how to make it so when someone hovers their mouse over a word in my text it will change an image. For example, i would like to have a product list, of about 10 different products, and instead of making 10 separate pages, i just want to create a div tag, above the list, so when they roll their mouse over each item, that corresponding image appears in the above tag. I would appreciate any and all help
Thanks!

Rick22 Flair Rick22 Flair
Posts: 5

i've been designing web sites since 3 years now...
but i've never learnt this.. i wonder y..?
you can see an excellent example of this on www.netcarshow.com

[url=http://www.blognlist.com/100-0-1-7.html]BlognList link building[/url] [url=http://www.blognlist.com/affiliates.html]Make money with Link building[/url]

Deb Das Deb Das
Posts: 6

Hey - with div tag it is difficult to do this do you need something like our website http://www.webguru-india.com, when you mouseover the image will change or go to http://www.dynamicdrive.com for JavaScript code...

Deb Das Deb Das
Posts: 6

Hey - with div tag it is difficult to do this do you need something like our website http://www.webguru-india.com, when you mouseover the image will change or go to http://www.dynamicdrive.com for JavaScript code...

Scott Haines Scott Haines
Posts: 4

Hey Guys, this one is easy.

The best way to trigger one effect from another is like so.




function switchimg(obj,num){
var theObj = document.getElementById(obj);
var theCurNum = num;
var img1 = "http://www.your-site/images/your-image.jpg";
var img2 = "http://www.your-site/images/your-image2.jpg";
if(num == '1'{
theObj.innerHTML = "img src=""+img1+"" border="0" alt="" title=""/>";
} else {
we know num = 2
theObj.innerHTML = "theObj.innerHTML = "img src=""+img2+"" border="0" alt="" title=""/>";";
}
}




a href="javascript://" onmouseover="switchimg('theimg','2';">roll over me/a>
div id="theimg">img src="http://www.your-site/images/your-image.jpg" border="0" alt="" title=""/>
/div>



-----

As you can see you are simply doing a re-write of the element via DOM scripting, this can be effective when wanting to change images, or actual page content via a user's interaction with the page.

Check out the book DOM Scripting DOM Scripting - Book for more useful tips on dynamic HTML (DHTML)

Cheers,
Scott Haines
Bay Area Website Design - Newfront Creative

Scott Haines Newfront Creative

Scott Haines Scott Haines
Posts: 4

Hey Just a quick update. I keep getting more and more // added to my post and it makes it real hard to get the point across. So basically, you have a roll-over element that triggers function, this function takes 2 parameters, 1st is the id of the image, the 2nd is the number for the image you want to display. When you roll over the image, the 1st parameter (the reference to the image div) is re-written so the image updates.

- Scott

Scott Haines Newfront Creative

You must login to reply