PDA

View Full Version : 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/images/logo%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:

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

<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&#37;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.

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

.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');
}