PDA

View Full Version : Quick one- Is there a CSS style for IMG NAME?



KELS!
Mar 23rd, 2007, 01:24 AM
I need the image name tag for the rollover script that I got out of Imageready- but I cannot validate my code with this included:


<img src="http://" name="namehere"/>

Is there some way I can define the name of the image with a css attribute?

IMAGE PART:

<a href="http://websitemaintenance"
onmouseover="changeImages('htdimageready2_Layer_5', 'images/htdimageready2_Layer-5-over.jpg'); return true;"
onmouseout="changeImages('htdimageready2_Layer_5', 'images/htdimageready2_Layer-5.jpg'); return true;">
<img class="borderless" name="htdimageready2_Layer_5" src="images/htdimageready2_Layer-5.jpg" width="180" height="86" alt=""/></a>


FULL 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" lang="en" xml:lang="en">
<head>
<title>Head-Turning Designs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
htdimageready2_Layer_1_over = newImage("images/htdimageready2_Layer-1-over.jpg");
htdimageready2_Layer_2_over = newImage("images/htdimageready2_Layer-2-over.jpg");
htdimageready2_Layer_5_over = newImage("images/htdimageready2_Layer-5-over.jpg");
preloadFlag = true;
}
}

// -->
</script>
</head>

<body onload="preloadImages();">

<table id="Table_01" width="100%" height="287" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4">
<img src="images/htdimageready2_01.jpg" width="737" height="165" alt=""/></td>
<td rowspan="3" style="background: url(images/htdimageready2_02.jpg) no-repeat; width:100%;"></td>
</tr>
<tr>
<td>
<img src="images/htdimageready2_03.jpg" width="231" height="86" alt=""/></td>
<td>
<a href="http://onlinedesign"
onmouseover="changeImages('htdimageready2_Layer_1', 'images/htdimageready2_Layer-1-over.jpg'); return true;"
onmouseout="changeImages('htdimageready2_Layer_1', 'images/htdimageready2_Layer-1.jpg'); return true;">
<img name="htdimageready2_Layer_1" src="images/htdimageready2_Layer-1.jpg" width="178" height="86" alt=""/></a></td>
<td>
<a href="http://printdesign"
onmouseover="changeImages('htdimageready2_Layer_2', 'images/htdimageready2_Layer-2-over.jpg'); return true;"
onmouseout="changeImages('htdimageready2_Layer_2', 'images/htdimageready2_Layer-2.jpg'); return true;">
<img name="htdimageready2_Layer_2" src="images/htdimageready2_Layer-2.jpg" width="148" height="86" alt=""/></a></td>
<td>
<a href="http://websitemaintenance"
onmouseover="changeImages('htdimageready2_Layer_5', 'images/htdimageready2_Layer-5-over.jpg'); return true;"
onmouseout="changeImages('htdimageready2_Layer_5', 'images/htdimageready2_Layer-5.jpg'); return true;">
<img class="borderless" name="htdimageready2_Layer_5" src="images/htdimageready2_Layer-5.jpg" width="180" height="86" alt=""/></a></td>
</tr>
<tr>

<td colspan="4">
<img src="images/htdimageready2_07.jpg" width="737" height="36" alt=""/></td>
</tr>
</table>

<div class="menu">
<a href="#">HOME</a> <img src="images/arrow.gif" alt="" width="16" height="12"/> <a href="#">SERVICES</a> <img src="images/arrow.gif" alt="" width="16" height="12"/> <a href="#">PORTFOLLIO</a>

<img src="images/arrow.gif" alt="" width="16" height="12"/> <a href="#">CONTACT</a> <img src="images/arrow.gif" alt="" width="16" height="12"/> <a href="#">ABOUT</a> <img src="images/arrow.gif"

alt="" width="16" height="12"/> <a href="#">FAQ</a>
</div>

<div class="content">
<h1>Portfollio</h1>
<h2>Design examples and products.</h2>
<p>Welcome to the portfollio. I'm glad you've decided to take a moment to look at my work, and hope that you find something here that you absolutely love! If you're interested in getting in contact with me

about possible website services, please view the contact page! </p>

<em>Italic Text</em> <strong>Bold Text</strong> <a href="#">Linked Text</a>
<br /><br /><br /><br /><br /><br /><br />
</div>

<table width="100%" style="height:21px; background: url(images/br.jpg) repeat-x;"><tr><td></td></tr></table>

<div class="copyandlinks">
<a href="#">Home</a> :: <a href="#">Services</a> :: <a href="#">Portfollio</a> :: <a href="#">Contact</a> :: <a href="#">About</a><br />
<div class="smalltext"><a href="#">Privacy Policy</a> - <a href="#">FAQ</a></div>

Head-Turning Designs &copy; Kelsie Klaustermeier
</div>

</body>
</html>

ronaldb66
Mar 23rd, 2007, 11:40 AM
The name attribute on the img element should probably be replaced by an id for it to validate XHTML 1.0 Strict.

CSS is for presentation; this is typically a markup aspect, so no, there is no CSS "attribute" (there are none anyway; there are CSS properties, though) for this.

There is also the CSS :hover pseudoclass (http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes) which makes JavaScript rollovers obsolete.

nexosis
Mar 23rd, 2007, 03:06 PM
i'm not sure about your question, but I saw this code and i'm to tell something:


<img src="http://" name="namehere"/>


it should be


<img src="http://" name="namehere" />

VIPStephan
Mar 23rd, 2007, 04:15 PM
That white space has almost no relevancy in current browsers. But that one is even the least bit I would complain about. The entire code above is what’s crap and should be completely replaced by CSS rollovers.

felgall
Mar 23rd, 2007, 09:04 PM
It should be:


<img src="http://" id="namehere" />

since name is only valid for form fields to be passed to the server.

ahallicks
Mar 23rd, 2007, 10:35 PM
It should be:


<img src="http://" id="namehere" />

since name is only valid for form fields to be passed to the server.

And even then only without a strict doctype... I had to convert all my js name.values to document.getElementById('name').values because of that stupid no name thing!

Arbitrator
Mar 23rd, 2007, 11:05 PM
i'm not sure about your question, but I saw this code and i'm to tell something:


<img src="http://" name="namehere"/>


it should be


<img src="http://" name="namehere" />
This is irrelevant. The only reason was for compatibility with some old browsers (I think it was Netscape 4). I suppose that the point is moot though; the OP should be using HTML instead of (fake) XHTML.



<script type="text/javascript">
<!--

// -->
</script>I know it’s not real XHTML, because, when using the real thing, those comments tags above are real comment tags and the script would have been commented out. You shouldn’t comment out your scripts or style sheets in XHTML or even in HTML, for that matter.


And even then only without a strict doctype... I had to convert all my js name.values to document.getElementById('name').values because of that stupid no name thing!The name attribute is still usable on form controls (but not the form element itself) even in Strict, I think; otherwise, use of languages such as PHP would hinder the adoption of Strict because that language utilizes the name attributes for those elements.

KELS!
Mar 24th, 2007, 02:48 AM
Thanks very much to everyone who replied!! I decided to just scrap the whole Javascript idea and go with the CSS pseudo class properties. My site is now validating well.

Thanks Ronaldb66 for the css suggestion!