4 replies [Last post]
Alan
Offline
Enthusiast
Last seen: 18 years 42 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

Hi there,

I have a problem. I've made a page with an XHTML 1.0 Transitional doc type. It works fine, but it doesn't validate as XHTML 1.0 Transitional.

The reason why it doesn't validate is because the page includes references to "OnLoad" "onMouseOver" and "onMouseOut". Yes, I have rollover images on the page.

How can use rollover images on my XHTML page AND get it to validate? Is it possible?

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 36 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

XHTML Won't Allow "onMouseOver"

Yes. By using CSS, you should get the desired mouseover effect. Assuming you are talking about a toolbar menu m/o, it would look something like this;

#toolbar ul li {
color: #000
background: url(gfx/someimage_1.gif) top left no-repeat; /*The mouseover image*/
}
#toolbar ul li a {
color: #000
background: url(gfx/someimage_0.gif) top left no-repeat; /*The non-mouseover image*/
}
#toolbar ul li a:hover {
color: #333
background: none; /*removes the non-mouseover image*/
}

This technique allows for the desired mouseover effect as well as not give you that annoying flicker that IE gives you when trying to load a seperate image for the mo. It basically preloads both states of the mo images in one pass.

With this, you won't need any of that funky 'OnMouseOver' code.

Hope that helps.
cb

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.

chucklarge
Offline
newbie
Last seen: 17 years 50 weeks ago
Joined: 2004-08-23
Posts: 6
Points: 0

XHTML Won't Allow "onMouseOver"

I believe you have to change it to 'onmouseover' with no Caps.

Alan
Offline
Enthusiast
Last seen: 18 years 42 weeks ago
Joined: 2003-10-20
Posts: 72
Points: 0

XHTML Won't Allow "onMouseOver"

Hi,

Chucklarge, your solution was the simplest, and works. I changed all my code to lowercase, and the site now validates as XHTML 1.0 Transitional.

Crazybat, your solution was clever, but I'm not exactly sure how your code would apply to multiple navigation items. What I'd like to do is have 7 different GIF images, that swap to 7 other different GIF images, on mouse over.

crazybat
crazybat's picture
Offline
Enthusiast
Surrey, British Columbia, Canada
Last seen: 13 years 36 weeks ago
Surrey, British Columbia, Canada
Joined: 2004-08-17
Posts: 58
Points: 0

XHTML Won't Allow "onMouseOver"

Hey Alan.

I absolutely agree with Charlie's solution. It will definitely validate your page.

But, if you are curious, there is also a way to get what you are asking for using my same method. And here we go;

HTML

<div id="toolbar">
<ul>
<li id="navhome"><a href="/" title="take me home" id="ahome">Home</a></li>
<li id="navstandards"><a href="/standards/" title="much ado about standards" id="astandards">Standards</a></li>
<li id="navstuff"><a href="/stuff/" title="cool stuff, yo!" id="astuff">Stuff</a></li>
<li id="navme"><a href="/me/" title="it's me" id="ame">me</a></li>
</ul>
</div>

CSS

#toolbar ul li#navhome {
	background: url(../gfx/menu/diamond-bg-mo.gif) bottom left no-repeat;
}
#toolbar ul li#navstandards {
	background: url(../gfx/menu/club-bg-mo.gif) bottom left no-repeat;
}
#toolbar ul li#navstuff {
	background: url(../gfx/menu/heart-bg-mo.gif) bottom left no-repeat;
}
#toolbar ul li#navme {
	background: url(../gfx/menu/spade-bg-mo.gif) bottom left no-repeat;
}
#toolbar ul li a {
	display: block;
}
#toolbar ul li a#ahome {
	background: url(../gfx/menu/diamond-bg.gif) bottom left no-repeat;
}
#toolbar ul li a#astandards {
	background: url(../gfx/menu/club-bg.gif) bottom left no-repeat;
}
#toolbar ul li a#astuff {
	background: url(../gfx/menu/heart-bg.gif) bottom left no-repeat;
}
#toolbar ul li a#ame {
	background: url(../gfx/menu/spade-bg.gif) bottom left no-repeat;
}
#toolbar ul li a#ahome:hover, 
#toolbar ul li a#astandards:hover,
#toolbar ul li a#astuff:hover,
#toolbar ul li a#ame:hover {
	color: #f63;
	background: transparent;
}

This is of course using only four menu items, but hopefully, you get the idea. I just don't like using JavaScript when I don't have to, but that's just me Smile

cb

Crazy Bat Designs
Home of the phpBB WASO
Helping You Reach The MOST People Possible.