Hello I have simple problem with my rollover button code but I can't find it!! var TeamUp = new Image(); TeamUp.src = "GFX/TeamUp.gif"; var TeamOver = new Image(); TeamOver.src = "GFX/TeamOver.gif"; var JoinUp = new Image(); JoinUp.src = "GFX/JoinUp.gif"; var JoinOver = new Image(); JoinOver.src = "GFX/JoinOver.gif"; var LinksUp = new Image(); LinksUp.src = "GFX/LinksUp.gif"; var LinksOver = new Image(); LinksOver.src = "GFX/LinksOver.gif"; Code (markup): Here I am defining the button image variables for later functions but the rollovers just won't work. They will work if the image files are in the same folder as the index.htm but when I place them in the folder GFX, the rollovers won't work. I think I have specified the path incorrectly. I have tried variations of "GFX\\linksOver.gif" and "\\GFX\\LinksOver.gif" but nothing works. What's wrong?
Did you try /GFX/TeamUp.gif etc. If that doesn't work can you post the rest of the script and i'll have a look at it.
Unfortunatly changing to foward slash did not work. Here is the entire code...I Appreciate your help. [SIZE="2"][COLOR="Red"]<script language = "Javascript"> <!-- if (document.images) { var defImg = "News"; var NewsUp = new Image(); NewUp.src = "/GFX/ewsUp.gif"; var NewsOver = new Image(); NewsOver.src = "/GFX/NewsOver.gif"; var ForumUp = new Image(); ForumUp.src = "/GFX/ForumUp.gif"; var ForumOver = new Image(); ForumOver.src = "/GFX/ForumOver.gif"; var IslamUp = new Image(); IslamUp.src = "/GFX/IslamUp.gif"; var IslamOver = new Image(); IslamOver.src = "/GFX/IslamOver.gif"; var PlanUp = new Image(); PlanUp.src = "/GFX/PlanUp.gif"; var PlanOver = new Image(); PlanOver.src = "/GFX/PlanOver.gif"; var GalleryUp = new Image(); GalleryUp.src = "/GFX/GalleryUp.gif"; var GalleryOver = new Image(); GalleryOver.src = "/GFX/GalleryOver.gif"; var TeamUp = new Image(); TeamUp.src = "/GFX/TeamUp.gif"; var TeamOver = new Image(); TeamOver.src = "/GFX/TeamOver.gif"; var JoinUp = new Image(); JoinUp.src = "/GFX/JoinUp.gif"; var JoinOver = new Image(); JoinOver.src = "/GFX/JoinOver.gif"; var LinksUp = new Image(); LinksUp.src = "/GFX/LinksUp.gif"; var LinksOver = new Image(); LinksOver.src = "/GFX/LinksOver.gif"; } function act (imgName) { document.images[imgName].src = eval(imgName + "Over.src") ; } function inact (imgName) { document.images[imgName].src = eval(imgName + "Up.src") ; } function actMenuItem(imgName) { act(imgName); inact(defImg); } function inactMenuItem(imgName) { inact(imgName); act(defImg); } // --> </script>[/COLOR] [COLOR="Blue"]<a href ="Index.htm"><img src= "GFX\NewsUp.gif" name = "News" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Islam')" onMouseOut= "inactMenuItem('Islam')"><img src= "GFX/IslamUp.gif" name = "Islam" height="25" border = "0" align="top" width ="100"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Forum')" onMouseOut = "inactMenuItem('Forum')"><img src= "GFX/ForumUp.gif" name = "Forum" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver= "actMenuItem('Plan')" onMouseOut = "inactMenuItem('Plan')"><img src= "GFX/PlanUp.gif" name = "Plan" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Team')" onMouseOut = "inactMenuItem('Team')"><img src= "GFX/TeamUp.gif" name = "Team" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Join')" onMouseOut = "inactMenuItem('Join')"><img src= "GFX/JoinUp.gif" name = "Join" width="100" height="25" border = "0" align="top"/></a> <a href="Index.htm" onMouseOver = "actMenuItem('Gallery')" onMouseOut = "inactMenuItem('Gallery')"><img src="GFX/GalleryUp.gif" name = "Gallery" width="100" height="25" border = "0" align="top"/></a> <a href="Index.htm" onMouseOver = "actMenuItem('Links')" onMouseOut = "inactMenuItem('Links')"><img src="GFX/LinkUp.gif" name = "Links" width="100" height="25" border = "0" align="bottom"/></a> [/COLOR][/SIZE] Code (markup):
Code works fine for me in folders. You made a few typos in your code though, but make sure the script is in the main folder, and in that folder you have another folder named GFX with all those images in it. Then use this code <script language = "Javascript" type="text/javascript"> <!-- if (document.images) { var defImg = "News"; var NewsUp = new Image(); NewsUp.src = "/GFX/NewsUp.gif"; var NewsOver = new Image(); NewsOver.src = "/GFX/NewsOver.gif"; var ForumUp = new Image(); ForumUp.src = "/GFX/ForumUp.gif"; var ForumOver = new Image(); ForumOver.src = "/GFX/ForumOver.gif"; var IslamUp = new Image(); IslamUp.src = "/GFX/IslamUp.gif"; var IslamOver = new Image(); IslamOver.src = "/GFX/IslamOver.gif"; var PlanUp = new Image(); PlanUp.src = "/GFX/PlanUp.gif"; var PlanOver = new Image(); PlanOver.src = "/GFX/PlanOver.gif"; var GalleryUp = new Image(); GalleryUp.src = "/GFX/GalleryUp.gif"; var GalleryOver = new Image(); GalleryOver.src = "/GFX/GalleryOver.gif"; var TeamUp = new Image(); TeamUp.src = "/GFX/TeamUp.gif"; var TeamOver = new Image(); TeamOver.src = "/GFX/TeamOver.gif"; var JoinUp = new Image(); JoinUp.src = "/GFX/JoinUp.gif"; var JoinOver = new Image(); JoinOver.src = "/GFX/JoinOver.gif"; var LinksUp = new Image(); LinksUp.src = "/GFX/LinksUp.gif"; var LinksOver = new Image(); LinksOver.src = "/GFX/LinksOver.gif"; } function act (imgName) { document.images[imgName].src = eval(imgName + "Over.src") ; } function inact (imgName) { document.images[imgName].src = eval(imgName + "Up.src") ; } function actMenuItem(imgName) { act(imgName); inact(defImg); } function inactMenuItem(imgName) { inact(imgName); act(defImg); } // --> </script> <a href ="Index.htm" onMouseOver = "actMenuItem('News')" onMouseOut= "inactMenuItem('News')"><img src= "GFX/NewsUp.gif" name = "News" height="25" border = "0" align="top" width ="100"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Islam')" onMouseOut= "inactMenuItem('Islam')"><img src= "GFX/IslamUp.gif" name = "Islam" height="25" border = "0" align="top" width ="100"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Forum')" onMouseOut = "inactMenuItem('Forum')"><img src= "GFX/ForumUp.gif" name = "Forum" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver= "actMenuItem('Plan')" onMouseOut = "inactMenuItem('Plan')"><img src= "GFX/PlanUp.gif" name = "Plan" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Team')" onMouseOut = "inactMenuItem('Team')"><img src= "GFX/TeamUp.gif" name = "Team" width="100" height="25" border = "0" align="top"/></a> <a href ="Index.htm" onMouseOver = "actMenuItem('Join')" onMouseOut = "inactMenuItem('Join')"><img src= "GFX/JoinUp.gif" name = "Join" width="100" height="25" border = "0" align="top"/></a> <a href="Index.htm" onMouseOver = "actMenuItem('Gallery')" onMouseOut = "inactMenuItem('Gallery')"><img src="GFX/GalleryUp.gif" name = "Gallery" width="100" height="25" border = "0" align="top"/></a> <a href="Index.htm" onMouseOver = "actMenuItem('Links')" onMouseOut = "inactMenuItem('Links')"><img src="GFX/LinkUp.gif" name = "Links" width="100" height="25" border = "0" align="bottom"/></a> Code (markup):
Thanks for taking your time for fixing those typos giraf. I found later that the problem was in fact with the path. I specified all paths as "GFX\\Image.gif" and it worked. Thanks again