PDA

View Full Version : html for rollovers/mouseovers code needed

hazel
03-03-2007, 09:02 PM
Hello All, I am new here. I've just recently been trying to learn to create graphics as links to put on my site. Just used text before. But having trouble. When I created this mouseover for a graphic link to change when hovered over, it works on my pc, but when I upload it to my site, it doesn't work and no graphics show up. What am I doing wrong? Any help plz? i guess I am not pointing my images to the right place. IF you have a better tutorial on how to create code for the mouseovers, that would be awesome! Thanks!:confused:

<TR>
<TD ROWSPAN="1" COLSPAN="1" WIDTH="150" HEIGHT="50">
<A HREF="http://www.mysite.com/gold.html"

onMouseOver="if(document.images)

document.menugreen0.src='menu1_1x1.jpg';"
onMouseOut="if(document.images)

document.menugreen0.src='menu2_1x1.jpg';"
><IMG NAME="menugreen0" SRC="menu2_1x1.jpg" WIDTH="150"

HEIGHT="50" BORDER="0"></A></TD>
</TR>

Did I mention I am having a tough time understanding the process for rollovers? my images are menu2_1x1.jpg (mouse out) and menu1_1x1.jpg (mouseover). I am not sure where this name, "menugreen0", came in. I am lost.
acktacky
03-04-2007, 02:53 AM
I had some trouble with mouseovers on the last time I tried to use them, so I wouldn't be of much help with you there. I tried getting code from dynamicdrive.com if you want to try their rollovers. I could only manage to get one rollover to work instead of a series of them to work.

menugreen0 is the name of your rollover button, though. The whole set. So that includes your in and your out. When you point your mouse of that certain area, it will call on menugreen0 to relay what it should present to you. If you had another rollover, you would give it a different name, so your code wouldn't call upon the wrong image to present to you on the page.

Essentially... Like I said, the last time I tried to do rollovers it was being testy. XD But that's what your menugreen0 means, at least.
Ges
03-05-2007, 08:22 PM
Hi Hazel,
This is the easiest way to accomplish image/mouse rollovers using Javascript and can be used many times over without change. Just copy this code as it is firstly to test it on your PC.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Mouse Overs with Links</title>

<script language="JavaScript" type="text/javascript">
<!--
function SwitchImg()
{
var rem, keep=0, store, obj, switcher=new Array, history=document.Data;
for (rem=0; rem < (SwitchImg.arguments.length-2); rem+=3) {
store = SwitchImg.arguments[(navigator.appName == 'Netscape')?rem:rem+1];
if ((store.indexOf('document.layers[')==0 && document.layers==null) ||
(store.indexOf('document.all[')==0 && document.all==null))
store = 'document'+store.substring(store.lastIndexOf('.'), store.length);
obj = eval(store);
if (obj != null) {
switcher[keep++] = obj;
switcher[keep++] = (history==null || history[keep-1]!=obj)?obj.src:history[keep];
obj.src = SwitchImg.arguments[rem+2];
} }
document.Data = switcher;
}

function RestoreImg()
{
if (document.Data != null)
for (var rem=0; rem<(document.Data.length-1); rem+=2)
document.Data[rem].src=document.Data[rem+1];
}

//-->
</script>

</head>

<body>

<a href="http://www.mysite.com/gold.html" onMouseOut="RestoreImg()" \
onMouseOver=SwitchImg('document.hazel','document.h azel','menu1_1x1.jpg')>
<img src="menu2_1x1.jpg" width="200" height="200" name="hazel" alt="The mouse is over" border="0"></a>

<!--

<a href="http://www.ANOTHER_SITE.com" onMouseOut="RestoreImg()" \
onMouseOver=SwitchImg('document.hazel2','document. hazel2','MOUSE_OVER_IMAGE.jpg')>
<img src="MOUSE_OUT_IMAGE.jpg" width="200" height="200" name="hazel2" alt="The mouse is over" border="0"></a>

-->

<!-- AS MANY AS YOU LIKE JUST COPY ONE FROM ABOVE BUT CHANGE THE hazel1 each time -->

</body>
</html>



The Javascript MUST NOT BE CHANGED. I've put your image names in along with the name of your site to link to. Note the name of the document and identifier in the <A HREF...> part - hazel1. When you want to add another rollover with other images then make sure you change this name to something else.
I've also put in a template ( within the comments ), to show you what's going on and also how to add more rollovers.
Now, about your site! I presume you are uploading to your HTDOCS folder. If so, then upload your images to the same folder cos the above code is looking in the same folder as where it is itself. If not, then set the paths to your images in the <A HREF....> parts.
You can change the size of the images in the <A HREF...> parts also.
By the way, just put the <A HREF...> parts in your <TD> sections as usual but keep the Javascript in your <HEAD>.

Well I hope this helps but for more info on mouseovers try Googling 'mouseovers'. There's lots out there!!

Regards,
Ges.