DOM Image Rollover Help

**eradio** · 04-08-2007, 10:48 PM

1) Script Title: DOM Image Rollover v3.0

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex15/domroll.htm

3) Describe problem: Hello, I own and maintain this website http://theeradio.com. I use wordpress and the K2 theme also. I would like to use this script to change the header image from the regular image to this http://www.theeradio.com/wp-includes...%20header4.png when a mouse hovers over it. I tried editing parts of my main css file:

#header {
background: #ffffff url('http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png') no-repeat bottom center;
class="domroll http://www.theeradio.com/wp-includes/images/logo%20header4.png";
}

but can not figure out how to get this script to work. Thanks for all your help.
-Eric Lawton

**mburt** · 04-08-2007, 11:10 PM

If you need a simple image mouseover, and this to the image tag:

Code:

<img src="originial source" onmouseover="this.src = 'http://www.theeradio.com/wp-includes/images/logo&#37;20header4.png';" onmouseout="this.src = 'originial source'">

**eradio** · 04-08-2007, 11:39 PM

I added this:

#header {
<img src="originial source" onmouseover="this.src = 'http://www.theeradio.com/wp-includes/images/logo%20header4.png';" onmouseout="this.src = 'http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png'">

to the header, but it didnt work. Do you have any other ideas off how to add it to the css file.

**mburt** · 04-08-2007, 11:48 PM

You didn't change the original source:

Code:

<img src="http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png" onmouseover="this.src = 'http://www.theeradio.com/wp-includes/images/logo&#37;20header4.png';" onmouseout="this.src = 'http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png'">

**mburt** · 04-08-2007, 11:48 PM

Just tested it, and it works on my end.

**eradio** · 04-08-2007, 11:51 PM

I just tested it and it doesnt work. Are you sure it should look like this:

#header {
<img src="http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png" onmouseover="this.src = 'http://www.theeradio.com/wp-includes/images/logo%20header4.png';" onmouseout="this.src = 'http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png'">
}

**mburt** · 04-08-2007, 11:52 PM

It's not the CSS source code, it's the HTML.
You have to change the html of your page.

Code:

<html>
<head>
<style type="text/css">
/*this is my style, but it has nothing to do with changing the image*/
</style>
</head>
<body>
<img src="http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png" onmouseover="this.src = 'http://www.theeradio.com/wp-includes/images/logo&#37;20header4.png';" onmouseout="this.src = 'http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png'">
</body>
</html>

**eradio** · 04-09-2007, 02:00 AM

Is there a way to implement the code into my css file?

**mburt** · 04-09-2007, 12:48 PM

Not reliably with IE. The hover pseudo class only works with anchors with IE.
This is an example, but again, won't work in IE:

Code:

.myImageClass:hover {
background:url('http://www.theeradio.com/wp-includes/images/logo&#37;20header4.png');
}

**eradio** · 04-10-2007, 12:24 AM

So it should look like this:

#header {
background: url('http://theeradio.com/wp-content/uploads/2007/03/logo-header3.png')
.myImageClass:hover {
background:url('http://www.theeradio.com/wp-includes/images/logo%20header4.png');
}

Thread: DOM Image Rollover Help

Thread Tools

Search Thread

DOM Image Rollover Help

Bookmarks

Bookmarks

Posting Permissions