PDA

Click to See Complete Forum and Search --> : <a name="..." in xhtml

thejoker101
06-22-2003, 09:10 PM
I was checking my code with the W3C's HTML validator to see that i'm throwing an error when i link to a section on the page. Ex: <a href="#top">Go To The Top</a> and having a link somewhere on the page that like this: <a name="top">This is the top</a>. according to the xhtml 1.1 spec's there is no name="" attribute. So how do I achieve this then?
spufi
06-22-2003, 11:32 PM
Instead of "name" you have to use "id." Here's how I link to the top of the page on my site.

For my <body> tag. <body id="top">

For the link. <a href="#top">Top</a>
thejoker101
06-23-2003, 12:02 PM
Hey, thanks, that worked.

Another problem however. I have the same basic problem for images when I use onmouseover for them. The image flip uses a name attribute on the images, however, after looking through the xhtml1.1 specs, there isn't one. I can't seem to find an image flip tutorial online that doesn't use the name="" attribute.
Jona
06-23-2003, 12:07 PM
Again, you should use ID. ;)

Jona
thejoker101
06-23-2003, 12:42 PM
well i figured that, but i'm not sure how to address image id's. How would I change my code from using name attributes, here is an example:

pic1 = new Image();
pic1.src = "i/linksHome.jpg";
pic2 = new Image();
pic2.src = "i/linksHomeHover.jpg";
function HomeOver() {document.linksHome.src = pic2.src; return true;}
function HomeOut() {document.linksHome.src = pic1.src; return true;}

<div><a href="index2.jsp" onmouseover="HomeOver()" onmouseout="HomeOut()"><img alt="Home" src="i/linksHome.jpg" name="linksHome" /></a></div>
Jona
06-23-2003, 01:00 PM
pic1 = new Image();
pic1.src = "i/linksHome.jpg";
pic2 = new Image();
pic2.src = "i/linksHomeHover.jpg";
function HomeOver() {document.getElementById("linksHome").src = pic2.src; return true;}
function HomeOut() {document.getElementById("linksHome").src = pic1.src; return true;}

<div><a href="index2.jsp" onmouseover="HomeOver()" onmouseout="HomeOut()"><img alt="Home" src="i/linksHome.jpg" id="linksHome" /></a></div>


Jona
Vladdy
06-23-2003, 02:12 PM
What a pity you are still using JS for rollovers....:
<style>
a#linkHome
{display: block;
height: 20px; /*you image height*/
width: 100px; /*your image width*/
background: url("i/linksHome.jpg");
padding-left: 100px; /*if your image contains text*/
}

a#linkHome:hover
{ background: url("i/linksHomeHover.jpg");
}
</style>

<a href="index2.jsp" id="linkHome">Home</a>
thejoker101
06-23-2003, 02:15 PM
What about preloading images then?
Vladdy
06-23-2003, 02:17 PM
Preloading is overrated. A little delay with the rollover action the first time around does NOT impair the page usability. On the other hand making your visitors wait, while you load all your graphics, creates greater problem - some of them will not be patient enough to see all your bells and whistles. Once the image is loaded, it is cashed and readily available. If you must, create a hidden element in your HTML with that image...
David Harrison
06-23-2003, 03:51 PM
Just out of interest, could you do the same thing with classes rather that id's and if so would it change all of the images or just the one the mouse is hovering over.
Jona
06-23-2003, 03:55 PM
Originally posted by lavalamp
Just out of interest, could you do the same thing with classes rather that id's and if so would it change all of the images or just the one the mouse is hovering over.

I would think so, as long as it is a link. But you could go and test it. ;)

Jona
Vladdy
06-23-2003, 05:06 PM
Originally posted by lavalamp
Just out of interest, could you do the same thing with classes rather that id's and if so would it change all of the images or just the one the mouse is hovering over.
Yes, you can do it with classes. It will change only the background of the element you are hovering over.
David Harrison
06-24-2003, 04:39 AM
Would it be possible to change something by hovering over somehting else then?
nkaisare
06-24-2003, 02:24 PM
Originally posted by lavalamp
Would it be possible to change something by hovering over somehting else then?
Yes and no.
No because hover changes properties of the element you are hovering over.
Yes, because you can make it appear as though its some other element thats changing.

For example, see:
http://www.meyerweb.com/eric/css/edge/popups/demo.html
http://www.meyerweb.com/eric/css/edge/popups/demo2.html
(where text/image pops up below the list of links. However, its just a part of the link thats hidden in :link and appropriately positioned in :hover.)

In cases like these, its easier to use javascript than CSS hovers.

Originally posted by Vladdy and Jona
Preloading is overrated
Yup, I agree with you. I think if you have large hover image (say 10kb+), you may be better off preloading it. But then, if you are actually using such large hover images, RETHINK.

I would think so, as long as it is a link.
I believe in Moz, but not in IE, you can hover over an arbitrary element. Does not have to be a link.

BTW, you can also use CSS selectors to create hover effects. For example:
div#nav a:hover {...}
will work just fine. All links within the <div id="nav">...</div>, will show the hover effect. As Vladdy said, ONLY the link you are hovering on is changed, not all links.
Remember, technically hovers like:
div#nav a:link {text-decoration: none}
div#nav a:hover {text-decoration: underline}
and
div#nav a:link {background: url('bgoff.png')}
div#nav a:hover {background: url('bgon.png')}
are same, in that they follow same CSS rules. In the former, text property is being affected; in the latter, its the background.
David Harrison
06-24-2003, 04:19 PM
Hmm, there's more to CSS than I thought, one last query, I know that you can use a:hover etc. but could I for example, use div:hover?
nkaisare
06-24-2003, 04:54 PM
Originally posted by lavalamp
Hmm, there's more to CSS than I thought, one last query, I know that you can use a:hover etc. but could I for example, use div:hover?
This has already been answered in Jona's and my replies. It works only with links in IE, but on arbitrary elements (including div) in Moz. Didn't test it myself, remember reading it somewhere (probebly on Eric Meyer's site).
cyberchimp
06-25-2003, 08:55 AM
I like the sound of using CSS for rollovers - but how do you incorporate the ALT attribute for the image?
Vladdy
06-25-2003, 09:06 AM
You do not. You have regular text for browsers that do not use CSS:

<a id="linkHome" href="home.html">Home</a>

and then, if the word "Home" is part of your image, you define the style so that the text is outside the visible box:

a#linkHome
{display: block;
height: 20px; /*you image height*/
width: 100px; /*your image width*/
background: url("i/linksHome.jpg");
padding-left: 100px; /*!!! make it at least image width!!!*/
overflow: hidden; /*!!! forgot that line in my original example !!! */
}
Jonathan
06-26-2003, 06:47 PM
I have an ok time preloading images... I use this..

<HTML>
<HEAD>
<TITLE>BLAH</TITLE>

<SCRIPT LANGUAGE="JavaScript">
Image1= new Image(width,hight)
Image1.src = "your image.something"

Image2= new Image(width,hight)
Image2.src = "your second image.something"

</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>
cyberchimp
06-27-2003, 09:06 AM
Aha, very cunning, Vladdy. What happens, though, if someone is using a browser that does support CSS, but they have images turned off? Won't they just see a blank space with neither image nor text? (I know this isn't likely to be a common scenario, but I'm trying to think through your suggestion.)
Vladdy
06-27-2003, 10:18 AM
I agree that in this very unlikely scenario, there will be a problem.
In any event incorporating text into image is rarely a good idea. Make image for background and leave text as text. On hover you can both change the background image and text proberties.
Greately reduces the number of images too.

BTW I was playing with the following solution to the problem you pointed out and also to the preloading issue", but IE is too dumb to understand CSS. Still with future in mind it degrades in IE without hover:

<!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-gb">
<head>
<title>Hover with "preloading" and no javascript</title>
<style>
body
{ font-family: Verdana,Arial,sans-serif;
}

img
{ border: none;
}

a#myLink
{ display: block;
position: absolute;
top: 100px;
left: 200px;
width: 150px;
height: 40px;
background: url("linkHoverImage.gif");
}

#myLink:hover img
{ display: none;
}

</style>

</head>
<body>

<a href="#" id="myLink"><img src="linkImage.gif" width="150" height="40" alt="Link to ..." /></a>

</body>
</html>