xhtml, where'd <a href onMouseOver go?

[michaellunsford]

Okay.. after the grueling transition to HTML 4.01 Strict, I am now toying with the idea of going to xhtml. I hit the w3c validator expecting to see "you don't have self closing tags." Imagine my surprise to have the first error saying [b]there is no attribute "onMouseOut"[/b].

I've done some googling and have found that the onMouseOver and onMouseOut remain on other tags? What's that about?  ???

What is the "right" way to do onMouseOver image swaps in xhtml?

[wildteen88]

Put simply Use CSS rather than HTML/Javascript

Look into the [b]:hover[/b] pseudo class

[michaellunsford]

I use a:hover to change CSS text attributes (color, underline, etc). Can you do image swaps with that?

wow, here's one.
[code]div#logo
{
  float: left;
  width: 300px;
  height: 36px;
  /*border: 1px solid black;*/
}
div#logo a
{
  display: block;
  height: 36px;
  background: url(./ff-logo-hifi.gif) no-repeat;
  overflow: hidden;
}
div#logo a:hover
{
  display: block;
  height: 36px;
  background: url(./ff-logo-hover.gif) no-repeat;
  overflow: hidden;
}
div#logo img
{
  visibility: hidden;
}[/code]

call me close-minded, but that sure seems like a whole lot of code to replace one image. 

I "get it" but I'm wondering why they would change the standard to increase coding a hundred-fold ???

[Ninjakreborn]

NO, you are looking at it the wrong way I had that problem too.
FOr the attributes in javascript now with xhtml, most of them use all lowercase.
onSubmit onLoad use to work not it's
onsubmit
onload
it's the same thing, they are still there, they just wanted them to all be lowercase, try it like that.
But he is right as well, it's easier using css instead of javasript that way they work even if the browser has javascript disabled, or it doesn't handle them.

[fenway]

In fact, they were always supposed to be all lowercase.  And the only reason for standards is to make the code larger and give developers more work & more headaches.

[michaellunsford]

Interesting observation, fenway ;D

Okay, it works, it validates.



Now, should I start a new topic on the CSS forum to ask if there's a shorter (inline) way to do CSS :hover image swaps?

[dbrimlow]

[quote]I "get it" but I'm wondering why they would change the standard to increase coding a hundred-fold[/quote]

Imagine that you want to change the 2 images you use on a mouseover hover ... sitewide ... on a 4,000 page website ... to use images in a new folder.

1. you can go into the pages one by one and change the path and images.
2. if using a web editor (like Dreamweaver or FrontPage), you can try a sitewide find and replace ... then republish 4,000 pages (hoping that they are all 100% the exact same version that were online, and not an older version of a few pages you fixed by hand via ftp).

OR

3. you can change two simple lines of the CSS and "PRESTO"! 4,000 page instantly use the new graphics live, online without so much as a browser user's "by your leave".

[fenway]

OR

4. You can dynamically generate your content and not being limited by CSS at all.

[michaellunsford]

;D
[quote author=fenway link=topic=111797.msg454504#msg454504 date=1161276402]
OR

4. You can dynamically generate your content and not being limited by CSS at all.
[/quote]

[dbrimlow]

[quote author=fenway link=topic=111797.msg454504#msg454504 date=1161276402]
OR

4. You can dynamically generate your content and not being limited by CSS at all.
[/quote]

LOL! He thinks writing a few lines of css is lengthy coding ... I don't think coding dynamically generating content is his short-cut solution.

(besides, even if he dynamically generates content, he still need to use a style sheet to actually style the dynamically generated content).

[michaellunsford]

Okay, I'm still a CSS noob, so be gentle. To me, it looks like I have two choices: 16 lines of CSS code [u]per[/u] button or 6 lines of code for an unlimited number of buttons. What am I missing?

[code=php:0]do {
echo "<a href=\"".$link[key($button)]."\" onmouseout=\"MM_swapImgRestore()\"
onmouseover=\"MM_swapImage('".current($button)."','','images/buttons/".current($button)."_over.jpg',1)\">
<img id=\"".current($button)."\" src=\"images/buttons/".current($button).".jpg" style="border-style:none;\" alt=\"".current($button)."\"></a>";
}while(next($button));[/code]

[fenway]

[quote author=dbrimlow link=topic=111797.msg454743#msg454743 date=1161306179]
[quote author=fenway link=topic=111797.msg454504#msg454504 date=1161276402]
OR

4. You can dynamically generate your content and not being limited by CSS at all.
[/quote]

LOL! He thinks writing a few lines of css is lengthy coding ... I don't think coding dynamically generating content is his short-cut solution.

(besides, even if he dynamically generates content, he still need to use a style sheet to actually style the dynamically generated content).




[/quote]

Actually, I meant instead of a style sheet.. the whole point of a style sheet is to be able to change everything at once (which never happens anyway).  Having hard-coded styles in one place -- where the content is generated -- amounts to the same thing.  Just a general observation, not specifically a solution for the problem at hand.

[dbrimlow]

[quote]Okay, I'm still a CSS noob, so be gentle. To me, it looks like I have two choices: 16 lines of CSS code per button or 6 lines of code for an unlimited number of buttons. What am I missing?[/quote]

Sorry if I sounded denegrating or condescending ... not my intent at all, and I am no one to condescend to others - having to still fight to get my css to work right much too often).

And (LOL Fenway) actually I see you ARE indeed dynamically generating your content.

First, are you using an "external" stylesheet? In other words putting a link in your head section to a prewritten .css file in a folder on your server (like [code]<link href="astyles.css" rel="stylesheet" type="text/css" />[/code]), or are you writing the styles on each page in the head section (like [code]<style type="text/css">
#content_right {background-color: transparent;text-align:center;}
#content_right img {width:100px; height:75px;}
</style>[/code]?

Because a style sheet need only be done once and linked to.

Second, "another" reason the css would be preferable (and you just have to copy and past the same style for each image then change the style name and image url) is what if people turn off their borwser javascript?

Sure, you can do a "no-script" links command, but then they just see flat text links in an otherwise artfully crafted page.

Third, the image is not written to the page each time. It doesn't show in the markup at all. It is a background image. You can even do a css version of "preload images" that will preload and cache as soon as the css is called - like this:

#navimgs {

background-image: url("media/button1.gif");
background-image: url("media/button2.gif");
background-image: url("media/button3.gif");
background-image: url("media/button4.gif");
background-image: url("media/button5.gif");
background-image: url("media/arrow2.jpg");
background-image: url("media/arrow3.jpg");
background-image: url("media/logo.gif");
background-image: url("media/title.jpg");
background-image: url("media/mugshot1.jpg");
}

[michaellunsford]

I usually attach a style sheet for the regular stuff -- html, body, a, and a:hover. Sometimes I'll add in td -- but generally put background images inline with HTML. It wouldn't be terribly difficult to convert the javascript to CSS, I'm just thinking there's got to be a way to do so dynamically.

[ToonMariner]

lost the thread a bit there (tired) BUT there are numerous ways to do a 'roll-over' usign css.

NOW the :hover psuedo class (as I last read) can only RELIABLY be applied to the a tag; IE6 < won't apply it to any other element without a plugin (I am told there is one for it but never bothered looking for something no-one else can't be bothered to find!).

So lets stick to the a tag for now.

As far as I have seen the most common method for switching the image is indeed to specify a different image for the background on the in teh :hover declarations.

You can also create an image that is TWICE the size of your image - have your image on top and the 'roll-over' state under it all in one image. Then use :hove to shift the background image up (this means you must make the element display: block; and give it a height and width.) The just use..

:hover
{ background-position 0 -60px; }

The final method is quite nice but proprietory....

you can use the filer for IE and thinsg liek opacity for compliant browser to actually 'cahnge' the image itself - no two images just using css to alter how its displayed...

I always go here to have a look at that last effect (done on whole site instead of just :hover etc.) [url=http://www.stuffandnonsense.co.uk/]http://www.stuffandnonsense.co.uk/[/url] look at it in ie then in ff - and note exact same mark-up ;)