makeing button change on mouse over

[Kelly**********]

I have buttons that act funny and are not consistant. When
you mouse over it changes when you click it follows a
link. but sometimes it doesnt show the picture you click
it again then the picture comes back. click it a few more
times and the picture isnt there reclick it or click
another button and the picture comes back. radomly happens
to any button

function init() {
if (!document.getElementById) return
var imgOriginSrc;
var imgTemp = new Array();
var imgarr = document.getElementsByTagName('img');
for (var i = 0; i < imgarr.length; i++) {
if (imgarr.getAttribute('hsrc')) {
imgTemp = new Image();
imgTemp.src = imgarr.getAttribute('hsrc');
imgarr.onmouseover = function() {
imgOriginSrc = this.getAttribute('src');
this.setAttribute('src',this.getAttribute
('hsrc'))
}
imgarr.onmouseout = function() {
this.setAttribute('src',imgOriginSrc)
}
}
}
}
onload=init;

</script>


<a href="index.htm">
<img border="0" src="webimage/button1.jpg"
hsrc="webimage/button1a.jpg"
align="left" width="120"
height="28"></a><p>&nbsp;</p>
<p>

<a href="news.htm">

<img border="0" src="webimage/button2.jpg"
hsrc="webimage/button2a.jpg"
align="left" width="120" height="28"></a></p>
<p>&nbsp;</p>
<p>

<a href="raceschedule.htm">

<img border="0" src="webimage/button3.jpg"
hsrc="webimage/button3a.jpg"
align="left" width="120" height="28"></a></p>
<p>&nbsp;</p>
<p>

<a href="directions.htm">

<img border="0" src="webimage/button4.jpg"
hsrc="webimage/button4a.jpg"
align="left" width="120" height="28"></a></p>
<p>&nbsp;</p>
<p>

<a href="joinwrcrw.htm">

<img border="0" src="webimage/button5.jpg"
hsrc="webimage/button5a.jpg"
align="left" width="120" height="28"></a></p>
<p>&nbsp;</p>

 

[Stefan B Rusynko]

Your script is relying on an unsupported attribute for the img tag (hsrc), which browsers will ignore
Find a more conventional mouseover script that also preload your images as in
http://javascript.internet.com/generators/preload-images.html



| I have buttons that act funny and are not consistant. When
| you mouse over it changes when you click it follows a
| link. but sometimes it doesnt show the picture you click
| it again then the picture comes back. click it a few more
| times and the picture isnt there reclick it or click
| another button and the picture comes back. radomly happens
| to any button
|
| function init() {
| if (!document.getElementById) return
| var imgOriginSrc;
| var imgTemp = new Array();
| var imgarr = document.getElementsByTagName('img');
| for (var i = 0; i < imgarr.length; i++) {
| if (imgarr.getAttribute('hsrc')) {
| imgTemp = new Image();
| imgTemp.src = imgarr.getAttribute('hsrc');
| imgarr.onmouseover = function() {
| imgOriginSrc = this.getAttribute('src');
| this.setAttribute('src',this.getAttribute
| ('hsrc'))
| }
| imgarr.onmouseout = function() {
| this.setAttribute('src',imgOriginSrc)
| }
| }
| }
| }
| onload=init;
|
| </script>
|
|
| <a href="index.htm">
| <img border="0" src="webimage/button1.jpg"
| hsrc="webimage/button1a.jpg"
| align="left" width="120"
| height="28"></a><p>&nbsp;</p>
| <p>
|
| <a href="news.htm">
|
| <img border="0" src="webimage/button2.jpg"
| hsrc="webimage/button2a.jpg"
| align="left" width="120" height="28"></a></p>
| <p>&nbsp;</p>
| <p>
|
| <a href="raceschedule.htm">
|
| <img border="0" src="webimage/button3.jpg"
| hsrc="webimage/button3a.jpg"
| align="left" width="120" height="28"></a></p>
| <p>&nbsp;</p>
| <p>
|
| <a href="directions.htm">
|
| <img border="0" src="webimage/button4.jpg"
| hsrc="webimage/button4a.jpg"
| align="left" width="120" height="28"></a></p>
| <p>&nbsp;</p>
| <p>
|
| <a href="joinwrcrw.htm">
|
| <img border="0" src="webimage/button5.jpg"
| hsrc="webimage/button5a.jpg"
| align="left" width="120" height="28"></a></p>
| <p>&nbsp;</p>
| <p>
|
| >-----Original Message-----
| >What are some tricks for making your web site faster
| >.
| >