Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: rollover image define by css in html body of page

  1. #1
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default rollover image define by css in html body of page

    Hi,

    I am using this CSS code to describe rollovers:

    #rollover1 {
    display: block;
    width: 200px;
    height: 53px;
    background: url('image.jpg') no-repeat;
    }
    #rollover1:hover {
    background-position: bottom;
    }

    I am wondering if there is a way to do it next to the image itself, in the "body" part of the html page.
    I tried putting this down.

    <div style="display: block; width: 306px; height: 231px; background: url('image.jpg') no-repeat;"<a href="#">&nbsp;</a></div>

    I got errors and I also don't know where to put in the information about the "background-position".

    Also the image jumped out of line (it is currently in a "container" so that all images are showing up "in-line" horizontally" like in this example.

    http://www.freewebs.com/testpractic/...al-scroll.html

    Thanks!

  2. #2
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Or should I give up and just use Javascript because I also want a border around the image (the kind you typically get for a linked file)?

  3. #3
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Yes. Use Javascript. This one isn't next to the image, but this is the one that I suggest using.
    This should be your CSS:
    Code:
    #rollover1 {
    display: block;
    width: 200px;
    height: 53px;
    background: url('image.jpg') no-repeat;
    }
    .rollOver {
    background-position: bottom;
    border: 1px solid #000;
    }
    And this should be your HTML:
    Code:
    <div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>
    Jeremy | jfein.net

  4. #4
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    There is a way to "fix" the issues with the ":hover" pseudo class in IE...

    It takes a little bit of work, but not much. If you're interested, do this...

    Place the following code into a blank text file, then save it as "IE_Fixes.htc"
    Code:
    <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
    <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
    <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
    <PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
    <SCRIPT LANGUAGE="JScript">
    function DoHover()
      { element.className += ' hover';
      }
    
    function DoActive()
      { element.className += ' active';
      }
    
    function RestoreHover()
      { element.className = element.className.replace(/\bhover\b/,'');
      }
    
    function RestoreActive()
      { element.className = element.className.replace(/\bactive\b/,'');
      }
    </SCRIPT>

    Then in your CSS, you can call it by using this for any element you want to achieve a css rollover:
    Code:
    div, span, td, tr, table, button{
    behavior:url('IE_Fixes.htc');
    }
    Then in the part of your css that controls the ":hover" just add this:
    Code:
    div:hover, div.hover{
    background:url('someimage.jpg');
    }
    Notice that instead of JUST using the ":hover" you have to use ".hover" as well.
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  5. #5
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by Nile View Post
    Yes. Use Javascript. This one isn't next to the image, but this is the one that I suggest using.
    This should be your CSS:
    Code:
    #rollover1 {
    display: block;
    width: 200px;
    height: 53px;
    background: url('image.jpg') no-repeat;
    }
    .rollOver {
    background-position: bottom;
    border: 1px solid #000;
    }
    And this should be your HTML:
    Code:
    <div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>
    Thanks. I tried doing what you say but look at what a mess it is. Things all over the place and still not jumping to bottom of image.

    original file all lined up:
    http://www.freewebs.com/testpractic/...al-scroll.html

    file with rollover:
    http://www.freewebs.com/testpractic/...l-scroll2.html

    the image:
    http://www.freewebs.com/testpractic/image.jpg

    the css:
    http://www.freewebs.com/testpractic/web-horizontal.css

    Thanks.

  6. #6
    Join Date
    Jan 2008
    Posts
    4,158
    Thanks
    28
    Thanked 623 Times in 619 Posts
    Blog Entries
    1

    Default

    Code:
    rollover2 {
    display: block;
    width: 231px;
    height: 231px;
    background: url('image.jpg') no-repeat;
    }
    You have that wrong, your either missing a . or a # at before rollover2.
    Jeremy | jfein.net

  7. #7
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    OK. I'm redoing it in the dumbest way possible and using this script instead.

    CSS
    #image {
    position: relative;
    display: block;
    width: 200px;
    height: 200px;
    background: url('image.jpg') no-repeat;
    border: 5px solid;
    }
    #image:hover {
    background-position: bottom;
    border: 5px solid;
    }

    HTML
    <a href="#" id="image">&nbsp;</a>

    I think the issue is something to do with it's "position" and I've tried every option.

    Basically, what happens is that inside this "container" that it is supposed to be in, the image moves to be "over" or "under" the first image in the series. Then the image after it looses its mind and goes again vertically under it.

    Here is how they line up without the rollover image:
    http://www.freewebs.com/testpractic/...al-scroll.html

    Here is how they line up with the rollover images:
    http://www.freewebs.com/testpractic/...al-scroll.html

    Thanks.

  8. #8
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    questions, have you given my solution a shot? It may seem a little confusing... but it's really not. It will make what you're trying to do MUCH easier, and it affects the entire page, not just ONE image.

    In other words, rather than having to use something like:
    Code:
    <div id="rollover1" onMouseOver="this.className='rollOver';" onMouseOut="this.className=null;"></div>
    Everytime you want to make something "rollover", all you would have to do is use CSS like this:
    Code:
    div:hover, div.hover{
    border:5px solid blue;
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  9. The Following User Says Thank You to TheJoshMan For This Useful Post:

    questions (08-09-2008)

  10. #9
    Join Date
    Jan 2008
    Location
    Los Angeles
    Posts
    97
    Thanks
    31
    Thanked 2 Times in 2 Posts

    Default

    Quote Originally Posted by Nyne Lyvez View Post
    There is a way to "fix" the issues with the ":hover" pseudo class in IE...

    It takes a little bit of work, but not much. If you're interested, do this...

    Place the following code into a blank text file, then save it as "IE_Fixes.htc"
    Code:
    <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
    <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
    <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
    <PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
    <SCRIPT LANGUAGE="JScript">
    function DoHover()
      { element.className += ' hover';
      }
    
    function DoActive()
      { element.className += ' active';
      }
    
    function RestoreHover()
      { element.className = element.className.replace(/\bhover\b/,'');
      }
    
    function RestoreActive()
      { element.className = element.className.replace(/\bactive\b/,'');
      }
    </SCRIPT>

    Then in your CSS, you can call it by using this for any element you want to achieve a css rollover:
    Code:
    div, span, td, tr, table, button{
    behavior:url('IE_Fixes.htc');
    }
    Then in the part of your css that controls the ":hover" just add this:
    Code:
    div:hover, div.hover{
    background:url('someimage.jpg');
    }
    Notice that instead of JUST using the ":hover" you have to use ".hover" as well.

    Yeah. I am just totally confused with this.
    Are you saying the first part, put in the CSS file somewhere? And why does it say "</SCRIPT>" at the end of it?
    I don't know what IE fix you are referring to or why I would need one.

    The second part, also just put it into the CSS file somwhere, just once?

    The third part, also in the CSS file? Then what goes into the HTML file?

    THANKS.

  11. #10
    Join Date
    Jan 2006
    Location
    Ft. Smith, AR
    Posts
    795
    Thanks
    57
    Thanked 130 Times in 117 Posts

    Default

    Ok, here's the breakdown...

    IE doesn't recognize :hover except on anchor (<a href> or "link") elements
    Now, let's say you wanted to make something have a "rollover" effect but it's NOT a link...

    The fix I posted will help you to achieve this.
    The first portion gets pasted into a BLANK text file and then saved as "IE_Fixes.htc"
    When you save the file, type it in EXACTLY as it is above (add the ".htc" and everything)

    So, that being said... Here is EVERYTHING you should paste into a new text file and save as "IE_Fixes.htc":

    Code:
    <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
    <PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
    <PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
    <PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
    <SCRIPT LANGUAGE="JScript">
    function DoHover()
      { element.className += ' hover';
      }
    
    function DoActive()
      { element.className += ' active';
      }
    
    function RestoreHover()
      { element.className = element.className.replace(/\bhover\b/,'');
      }
    
    function RestoreActive()
      { element.className = element.className.replace(/\bactive\b/,'');
      }
    </SCRIPT>
    Now, the second portion is telling IE that it should use this script for anything other than anchors (<a href> "links") that you define a ":hover" attribute to.

    If you want to make a ":hover" attribute for any <img> on the page, then you would put THIS in your CSS:
    Code:
    img{
    behavior:url('IE_Fixes.htc');
    }
    Now, let's say you wanted all the <img>'s on a page AND all the <div>'s on a page to have a ":hover" attribute... Then you would use THIS instead:
    Code:
    img, div{
    behavior:url('IE_Fixes.htc');
    }

    Now, the third part is the actual CSS code that tells those elements what to do once hovered on...
    Code:
    img:hover, img.hover{
    border:5px solid blue;
    }
    Or for the second example it would be...
    Code:
    img:hover, div:hover, img.hover, div.hover{
    border:5px solid blue;
    }
    --------------------------------------------------
    Reviews, Interviews, Tutorials, and STUFF
    --------------------------------------------------
    Home of the SexyBookmarks WordPress plugin

  12. The Following User Says Thank You to TheJoshMan For This Useful Post:

    questions (08-09-2008)

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
  •