FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Image Rollovers In Javascript With a Twist

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


ncwdavid
Hey, I want to know how to do a certain type on image rollover in javascript. Its not just the one where you put the mouse over the image and it changes.

Please look here:
http://www.walkincooler-walkinfreezer.com/RolloverWithExtendedImage.html

When I put the mouse over any of the links on the left or right hand side I want the image in the middle to change. For example:

If I move the mouse over "6 X 6 Cooler" I want the imagein the middle to change to a set image for the "6 X 6 Cooler".

Any help would be appreciated. Thanks!
mathiaus
This may be of some use to you. I created this a couple of weeks ago for someone else

Code:
function changeFeature(Num) {
   document.getElementById('feature_img').src = "./images/feature_" + Num + ".png";
}


This function was intended for use with images named as numbers but will work as text. It changes the image with the id 'feature_img' so you need to add that

Code:
<img src="6x6 cooler.gif" IMG STYLE="position:absolute; TOP:178px; LEFT:260px; WIDTH:300px; HEIGHT:300px" style="border: 2px Solid blue"  Alt=" 6' X 6' WALK IN COOLERWITH COMPLETE REFRIGERATION SYSTEM" id="feature_img" />


for your links add something like this
Code:
 onmouseover="changeFeature(6x6c);"


To change the image path or file extension, change it in the function bit.

Hope this at least gets you on the right track Very Happy
ncwdavid
Yeah I can figure out what to change looks very good and simple. Thanks for that.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.