Why does this not work - image scrollover

javascript

#1

listing 13-5

https://books.google.com/books?id=MhNhBgAAQBAJ&pg=PA204&lpg=PA204&dq=page+204+coding+with+javascript+for+dummies&source=bl&ots=i0LoSjCePH&sig=pPEGxGe8DMU3k94PoSf7EU3LXjk&hl=en&sa=X&ved=0ahUKEwi11vC6lY7VAhUK7yYKHU3QCv8Q6AEIQjAG#v=onepage&q=page%20204%20coding%20with%20javascript%20for%20dummies&f=false

listing 13-5

HI
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.


-------------------------------------------------------------------------

<html>
<head>
<style>
p {font-size: 70px}
</style>
<title>Rollover Image</title>

<script>
function swapImage(imgToSwap){
imgToSwap.src="http://www.mcclatchy-wires.com/incoming/bxsoz7/picture161552593/alternates/FREE_640/Pictures_Of_The_Week_Photo_Gallery_75223.jpg";
imgToSwap.alt="you are mousing over my button";
}

function swapBack (imgToSwap){
imgToSwap.src="http://www.mcclatchy-wires.com/incoming/dj2wbg/picture161552588/alternates/FREE_1140/Pictures_Of_The_Week_Photo_Gallery_60563.jpg";
imgToSwap.alt="please mouse over me!";
}

</script>

</head>

<body>
<p>This is a rollover excercise</p>

<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 !">

</body>
</html>


#2

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.


#3

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
Pirooz


#4

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.

Aside:

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.


#5

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