picture changes when cursor goes over it

[amyy]

When the cursor moves to a picture (which is linked to a webpage), it changes to another picture.

Also could someone advise on how to ensure that the link address is not shown in window status (bottom left hand corner of the webpage) when browsing using Internet explorer 7?
Many thanks in advance.

[Nile]

This is exactly what you need!:
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

[amyy]

Thanks to Nile.

But what I need is not thumbnail.
It's just the picture of same size on the same spot changes when the cursor moves over it.

[Nile]

It doesn't matter, this script will defendantly work.

[amyy]

Thanks Nile, I get what you mean.

Do you know how to ensure that the link address is not shown in window status (bottom left hand corner of the webpage) when browsing using Internet explorer 7?

[djr33]

Can you link to your page so we can see what you mean?

[amyy]

I am still in the midst of building the site.

Take for instance the following site:
http://www.computerhope.com/onmouse.htm

When the cursor moves over the link, the URL is shown at the left hand bottom of the page (using IE7) . I wonder if there is anyway to hide it?

[Nile]

Heres a fake link:


<script type="text/javascript">
function goTo(url){
window.location.href = url;
}
</script>
<style type="text/css">
.link {
color: blue;
cursor: pointer;
text-decoration: underline;
border-style: dotted;
border-color: darkred;
border-width: 0px;
}
</style>
<span class="link" onmousedown="this.style.color='darkred';this.style.borderWidth='1px';" onmouseup = "this.style.color='blue';this.style.borderWidth='0px'"onclick="goTo('http://google.com');">Fake Link</span>

[djr33]

<a href="....." onmouseover="imagestuff">

You just need to remove href, or make it link to "#", which is standard for not reloading the page (it will display, but that's normal). I believe it's more proper to have "#" than no href, as that will keep the page standard.

[amyy]

Many thanks to Nile and Djr33 for both your kind response to my queries on how to hide the URL link

If the cursor moves over a picture (with and without picture changes) instead of a word, how should the code be changed? I could not figure out how to do that.

[Nile]

Here you go:


<script type="text/javascript">
function goTo(url){
window.location.href = url;
}
</script>
<style type="text/css">
.link {
color: blue;
cursor: pointer;
text-decoration: underline;
border-style: dotted;
border-color: darkred;
border-width: 0px;
}
</style>
<span class="link" onclick="goTo('http://google.com');" onmousedown="this.style.borderWidth='1px';" onmouseup="this.style.borderWidth='0px';" onmouseout="this.onmouseup()"><img src="http://www.dynamicdrive.com/forums/designfiles/logo.gif"></span>

[amyy]

Many thanks to Nile for your kind response.

Would appreciate if you could advise on how to modify the code that you furnished earlier so that a new window would be opened when I click on the image?

The code I used earlier was
<A HREF="http://google.com" target=_blank><img src="1.jpg" ></A>