Jump to content


Photo

xhtml, where'd <a href onMouseOver go?


  • Please log in to reply
14 replies to this topic

#1 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 17 October 2006 - 04:52 PM

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 there is no attribute "onMouseOut".

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?

#2 wildteen88

wildteen88
  • Staff Alumni
  • Advanced Member
  • 10,482 posts
  • LocationUK, Bournemouth

Posted 17 October 2006 - 04:57 PM

Put simply Use CSS rather than HTML/Javascript

Look into the :hover pseudo class

#3 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 17 October 2006 - 05:31 PM

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

wow, here's one.
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;
}

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 ???

#4 Ninjakreborn

Ninjakreborn
  • Members
  • PipPipPip
  • Information Technology Specialist
  • 3,922 posts
  • Age:33

Posted 17 October 2006 - 07:06 PM

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.

------

Business Website: http://www.infotechnologist.biz

Personal Website: http://www.joyelpuryear.com

Blog Site: http://www.realmofwriting.com
Services: Web development, application development, mobile development, and custom development. All services listed on my website.


#5 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 17 October 2006 - 10:16 PM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#6 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 18 October 2006 - 03:14 PM

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?

#7 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 19 October 2006 - 02:57 PM

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



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".
Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#8 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 19 October 2006 - 04:46 PM

OR

4. You can dynamically generate your content and not being limited by CSS at all.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#9 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 19 October 2006 - 04:52 PM

;D

OR

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



#10 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 20 October 2006 - 01:02 AM

OR

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


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).




Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#11 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 20 October 2006 - 01:46 AM

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?

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));


#12 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 20 October 2006 - 04:15 PM

OR

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


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).





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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#13 dbrimlow

dbrimlow
  • Members
  • PipPipPip
  • Advanced Member
  • 712 posts

Posted 21 October 2006 - 05:01 PM

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?


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
<link href="astyles.css" rel="stylesheet" type="text/css" />
), or are you writing the styles on each page in the head section (like
<style type="text/css">
#content_right {background-color: transparent;text-align:center;}
#content_right img {width:100px; height:75px;}
</style>
?

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");
}

Dave

I am always amazed by no matter how much I know, I know I don't know as much as I thought I knew.  - D. Brimlow.

#14 michaellunsford

michaellunsford
  • Members
  • PipPipPip
  • Advanced Member
  • 1,023 posts
  • LocationLouisiana, USA

Posted 21 October 2006 - 07:13 PM

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.

#15 ToonMariner

ToonMariner
  • Members
  • PipPipPip
  • Advanced Member
  • 3,342 posts
  • LocationNewcastle upon Tyne, UK

Posted 23 October 2006 - 12:10 AM

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.) http://www.stuffandnonsense.co.uk/ look at it in ie then in ff - and note exact same mark-up ;)
follow me on twitter @PHPsycho




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users