Results 1 to 10 of 10

Thread: DOM Image Rollover Help

  1. #1
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default DOM Image Rollover Help

    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

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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'">
    - Mike

  3. #3
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    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'">
    - Mike

  5. #5
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    Just tested it, and it works on my end.
    - Mike

  6. #6
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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'">
    }

  7. #7
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  8. #8
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  9. #9
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

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

  10. #10
    Join Date
    Apr 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •