[Resolved]XHTML 1.1, javaScript, and roll over buttons
The following code is typically used when someone wants to add rollover buttons on their website (or, atleast what I used to use)
Code:
<script type="text/javascript">
if (document.images)
{
<!-- Home -->
homeon= new Image(139,46);
homeon.src="img/top_nav_home.png";
homeoff= new Image(139,46);
homeoff.src="img/top_nav_home_over.png";
}
function un_hover(imgName)
{
if (document.images)
{
imgOn=eval(imgName + "on.src");
document[imgName].src= imgOn;
}
}
function hover(imgName)
{
if (document.images)
{
imgOff=eval(imgName + "off.src");
document[imgName].src= imgOff;
}
}
</script>
<!--Java Script End-->
And this where the rollover should go:
Code:
<a href="index.php" onmouseover="hover('home')" onmouseout="un_hover('home')" >
<img src="img/top_nav_home.png" class="alpha" name="home" width="139px" height="46px" alt="Home" /></a>
Now I want to be XHTML 1.1 compliant and I want my code to validate. How do you do rollover buttons without the name attribute since that doesn't exist in XHTML 1.1?
Re: XHTML 1.1, javaScript, and roll over buttons
Get up to date with modern JavaScript techniques, in particular the Document Object Model.
Also, you should perhaps learn about the CSS :hover pseudo-class, because it makes this stuff a lot simpler.
Re: XHTML 1.1, javaScript, and roll over buttons
Quote:
Originally Posted by CornedBee
Get up to date with modern JavaScript techniques, in particular the Document Object Model.
Also, you should perhaps learn about the CSS :hover pseudo-class, because it makes this stuff a lot simpler.
I know about using :hover, however; as far as I'm away it won't worrk with the CSS PNG haack needed to make IE work with PNGs correctly (which I need).
I'll search google about the Document Object Model though. thanks
Re: XHTML 1.1, javaScript, and roll over buttons
What you need to do is give each element you want to access and ID attribute with a unique name. You then neet to use the document.getElementById() function to return a reference to the image.
You can then use the setAttribute() function of the Image element returned by getElementById to set the new image path.
Re: XHTML 1.1, javaScript, and roll over buttons
I've been searching google for a while and I cannot seem to find anything about using this technique and creating roll over buttons. I don't know javascript that well (well, I know barely anything in JavaScript. Thankfully I know C++ decently so it's helping).
Do you have any links to this info?
Re: XHTML 1.1, javaScript, and roll over buttons
Its a relitivly painless task. I have written the follwoing demo, which can be viewed here.
HTML Code:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Rollover Demo</title>
<script type="text/javascript">
<!--
function changeImage(img, newSrc)
{
img.setAttribute("src", newSrc);
}
//-->
</script>
</head>
<body>
<p>Use your mouse to demonstrate the image rollover:</p>
<p><img src="img/circle1.gif" alt="Rollover Image"
onmouseover="changeImage(this, 'img/circle2.gif')"
onmouseout="changeImage(this, 'img/circle1.gif')" />
</p>
</body>
</html>
If you want to use the real DOM event model, then you should no use the onmouseover and onmouseout attributes. However, I'm not sure it would work in Internet Explorer then and the above works in both Firefox and IE and also validates.
Re: XHTML 1.1, javaScript, and roll over buttons
