|
-
Jun 1st, 2005, 01:30 PM
#1
 [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?
Last edited by Kasracer; Jun 5th, 2005 at 12:06 AM.
-
Jun 1st, 2005, 01:40 PM
#2
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.
All the buzzt
 CornedBee
"Writing specifications is like writing a novel. Writing code is like writing poetry."
- Anonymous, published by Raymond Chen
Don't PM me with your problems, I scan most of the forums daily. If you do PM me, I will not answer your question.
-
Jun 1st, 2005, 02:14 PM
#3
Re: XHTML 1.1, javaScript, and roll over buttons
 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
-
Jun 2nd, 2005, 04:05 PM
#4
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.
-
Jun 2nd, 2005, 05:51 PM
#5
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?
-
Jun 3rd, 2005, 12:22 AM
#6
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.
-
Jun 5th, 2005, 12:06 AM
#7
Re: XHTML 1.1, javaScript, and roll over buttons
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote
