Why does this not work - image scrollover


<Below this line, add a link to the EXACT exercise that you are stuck at.>

listing 13-5


listing 13-5

<Below this line, in what way does your code behave incorrectly? Include ALL error messages.>

I hope I did not post to the wrong section. I used the listing 13-5 as a model and just changed the images referenced. what am I doing wrong? Because no images display when I execute the code from 13-5 with my images??
Thanks very much.

p {font-size: 70px} Rollover Image

This is a rollover excercise

<img src=“http://www.mcclatchy-wires.com/incoming/dj2wbg/picture161552588/alternates/FREE_1140/Pictures_Of_The_Week_Photo_Gallery_60563.jpg”/ id='myButton"
onmouseover= “swapImage(this);”
onmouseout= “swapBack(this);” alt= “please mouse over me !”>

<do not remove the three backticks above>

That does not look correct. The closing token should be at the end of the tag.

For the exercise, it would be better if you had two images stored locally that are the same dimensions, and smaller, say 400px wide or less. Hotlinking to images on another domain could lead to your IP being blocked by their server. Free images still implies that you download and host the images on your own server, not pull them down from theirs.

The other concern with this is that there could be latency issues that will delay the mouse over effect for a brief time (could be a second or more). This is not helpful to the effect.

Thank you so much for your assistance & helpful observations. I shall get on that immediately. still , when I tried to use local images in a directory other than where the code is I was unable to do it. is there a unique way of coding for a local directory other than the one where the code resides?
Thanks again

Easiest if you have external files in a folder below the index.html page.

+ projects
    + mouseover
        - index.html
        + images
            - button1.jpg
            - button2.jpg

I think you’ll get the idea.


To ensure there will be no latency issue, consider Dave Shea’s Sprites where the two images are combined into one, with only the top half showing, and the bottom half replacing it on mouseover. That is a different approach to this one, and not meant to toss this one aside. Just another technique to look into for future use.

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.