1.

Solve : Dreamweaver Rollover Image Code not working?

Answer»

My friend gave me the rollover image code that's included with Macromedia(or is it Adobe now?) Dreamweaver. I've been trying to do a little bit of HTML and just messing around with code to see what I can do before I go to do a real project. This code also let me adjust the images' properties (border, width, height etc.) just like if I were to put in a regular image. I'm currently sourcing the images from my own drive so I can do everything offline.

When I inserted the code, the mouseOut image WORKED fine, but the mouseOn image didn't show up at all.

I don't know how to put scripts into the posts without being restricted, so if anyone has Dreamweaver and knows where to insert URLs into the code or tell me how to post scripts into the forums that would be great.

Or if anyone could direct me to a site with a good script and code that allows me to modify image properties as well as do a rollover that would be appreciated too. Quote

My friend gave me the rollover image code that's included with Macromedia(or is it Adobe now?) Dreamweaver. I've been trying to do a little bit of HTML and just messing around with code to see what I can do before I go to do a real project. This code also let me adjust the images' properties (border, width, height etc.) just like if I were to put in a regular image. I'm currently sourcing the images from my own drive so I can do everything offline.

When I inserted the code, the mouseOut image worked fine, but the mouseOn image didn't show up at all.

I don't know how to put scripts into the posts without being restricted, so if anyone has Dreamweaver and knows where to insert URLs into the code or tell me how to post scripts into the forums that would be great.

Or if anyone could direct me to a site with a good script and code that allows me to modify image properties as well as do a rollover that would be appreciated too.
Hi, Sinkhan. I just got your PM, and saw the problem right away.

Your code has an error, and the error is in the URL A HREF link.
Quote
<body onLoad="MM_preloadImages('This is the mouseon image I want to be shown')">
<a href="Random Link" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image Name','','This is the mouseon image I want to be shown',1)"><img src="This is the mouseout image I want to be shown" alt="This is the rollover" name="Image Name" width="400" height="364" border="0">[/url]

What is should be:
Quote
<body onLoad="MM_preloadImages('This is the mouseon image I want to be shown')">
<a href="Random Link"> [highlight]<[/highlight]onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image Name','','This is the mouseon image I want to be shown',1)"><img src="This is the mouseout image I want to be shown" alt="This is the rollover" name="Image Name" width="400" height="364" border="0">[/url]
You will notice a highlighted element bracket (<) in the code that you should have. I am not 100% sure if that is the right element. Unfortunately, I don't have dreamweaver on this computer (but I will soon) so I can not be 100% sure.

PS: Any text can be placed right before the highlighted bracket.

Thanks, but when I WENT to try it, it still didn't work. When you do get Dreamweaver again, would it be possible to send me the code?

But again, thanks for trying.zylstra555, I'm afraid your correction is incorrect.  The onMouseOver and onMouseOut attributes belong to the tag.  >See here<.  In fact those attributes can be applied to any HTML element.

The code that I see looks fine, except for the image name: "Image Name".  I'm talking off the top of my HEAD here, but I'm pretty sure that spaces aren't valid in element IDs.  So call it "Image_Name" instead.

The code calls the javascript functions, MM_preloadImages(), MM_swapImage() and MM_swapImageRestore(), so those functions must be contained or included elsewhere in your HTML page (typically in the HEAD). Quote
zylstra555, I'm afraid your correction is incorrect.  The onMouseOver and onMouseOut attributes belong to the <A> tag.  >See here<.  In fact those attributes can be applied to any HTML element.

The code that I see looks fine, except for the image name: "Image Name".  I'm talking off the top of my head here, but I'm pretty sure that spaces aren't valid in element IDs.  So call it "Image_Name" instead.

The code calls the javascript functions, MM_preloadImages(), MM_swapImage() and MM_swapImageRestore(), so those functions must be contained or included elsewhere in your HTML page (typically in the HEAD).
COUGH COUGH*** EGGHEAD!
JK
May I ask which attribute your talking about? Do you mean the [/url] attribute?
BTW: I wont have Dreamweaver in front of me for a few days, I will have it next Wednesday.Oh that's ok, just as soon as it's possible and convient is fine. Thanks for all your help.

[edit]By the way rob, thanks for trying too, but my mouseOn image still doesn't work. Even stranger, I went to that link you posted and used the HTML validator and it said that there were no errors. So now this is really confusing.  [smiley=huh.gif][/edit] Quote
May I ask which <A> attribute your talking about? Do you mean the <A HREAF> [/url] attribute?
[/url] represents an HTML element.
href='...' represents an attribute of that element.
onMouseOver is also an attribute.  It happens to be an attribute that can be used with any HTML element.  Hence these are all valid:





You get the point.

So in this case, the onMouseOver and onMouseOut attributes need to appear within the tag to which they relate.

Incidentally, I haven't made any attempt to debug this problem, because I would need sight of the entire page.  If you read my earlier post carefully, you'll understand why.So how do I put scripting in posts?Like this:

<###script>

We know that the "###" will need to be deleted.Well here's the code:
Code: [Select]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<###script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
<###/script>
</head>

<body onLoad="MM_preloadImages('This is the mouseon image I want to be shown')">
<a href="http://www.google.ca"> <onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image Name','','This is the mouseon image I want to be shown',1)"><img src="This is the mouseout image I want to be shown" alt="This is the rollover" name="Image Name" width="400" height="364" border="0"></a>
</html>And just quickly, how do I make anchors so I can make like a nav bar at the top of a page and then link it to a LOWER portion of a page? And also how do I do the same thing, but a lower portion of a different page?

Ex: Nav bar contains "Events". I want to be able to click this text and link it 3/4s way down to a section called "Events". Another item in the nav bar will be contact phone number. I want to be able to click that text and go 1/2 down another page of the site.

And just one more thing, how do I make linking images instead of text? (Instead of clicking on just "Events" I want to have a graphical representation of "Events" in different colours and fonts.)

ThanksSee my first reply in this thread for a sugested correction to your code, which I see you have not yet implemented.

Quote

how do I make anchors
The place that you're linking to is specified thus: <a name='events'>Events[/url]and the link you click on is specified thus: <a href='#events'>... Quote
how do I make linking images instead of text?
Simple: <a href='#events'><img src='events.gif' border='0'>[/url]DreamWeaver makes rollover code look like this (this is an entire HTML document)

Code: [Select]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<###script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</###script>
</head>

<body onLoad="MM_preloadImages('FILE:///C|/Documents%20and%20Settings/Compaq_Owner/My%20Documents/Jesses%20Workspace/Zylstra%20Family/images/lborder.gif')">
<a href="URL" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ImageName','','file:///C|/Documents%20and%20Settings/Compaq_Owner/My%20Documents/Jesses%20Workspace/Zylstra%20Family/images/lborder.gif',1)"><img src="file:///C|/Documents%20and%20Settings/Compaq_Owner/My%20Documents/Jesses%20Workspace/Zylstra%20Family/images/header.jpg" alt="AltText" name="ImageName" width="572" height="76" border="0"></a>
</body>
</html>
Where header and lboarder are the two images (header is the original)

But I think I am a bit late for this, am I not?

Replace ###Script with just Script, and /###script with script. YaBB blocks the Script element in posting.I think I've finally found out what the problem with the coding.

Code: [Select]<body onLoad="MM_preloadImages('file:///C|\My Documents\HTML\Experimentation\Images\Balloon.jpg')">
<a href="http://www.yahoo.ca" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('ImageName','','file:///C|\My Documents\HTML\Experimentation\Images\Balloon.jpg',1)"><img src="file:///C|\My%20Documents\HTML\Experimentation\Images\Balloonpop.jpg" alt="AltText" name="ImageName" width="200" height="400" border="0"></a>
Along with all the scripting in zylstra's post, this is what I used to put in the images. This code still did not work. So I tried something daring and brave:

I changed all the backslashes for the mouseOn image (at least I THINK "\" is a backslash) into regular slashes and after that it worked perfectly.

I speculated that the problem might have to do something with making the spaces into "%20" and the colons into pipes, but after trying out many combinations with or without them, the only factor that really had an effect on whether the image worked or not was if the mouseOn image used slashes and not backslashes.

What an incredibly simple solution  [smiley=laugh.gif][smiley=grin.gif]

Thanks to zylstra and Rob  [smiley=thumbsup.gif] [smiley=thumbsup.gif]Good to hear!
You are very welcome.
And thank you for telling us what you did to fix the problem, as its knowledge to help us all


Discussion

No Comment Found

Related InterviewSolutions