SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    problems with mouseover effect

    Hello,

    Im trying to get a mouseover effect working. Please look at this image. When the mouse is over a number the close-by borders should become red.

    I cannot replace one image by another because the borders are 2px width.
    And I cannot use absolute positioning of <div> tags because the hole thing is centered horizontally and vertically in the browserwindow.

    Would be happy to hear some suggestions.

    oerdec

  2. #2
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried fiddling around with it for a bit but could'nt find any easy way to accomplish this effect.

    Here's what I did. Split the image in nine bits, one for each number (obvious). Make a div three images across and set grey background color. Make one class for each image with transparent borders. have border-width: 0 at the outside of the grid. Let border-color: red on hover.

    No need for special positioning since images left-float by default. You need to keep the div width however, because this solution depends on the background color of the div, and you dont want it to go outside the images.

    Take a look at this example

  3. #3
    monitormensch oerdec's Avatar
    Join Date
    Sep 2004
    Location
    Hamburg
    Posts
    706
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks figbeam for your help! It works now. Its a little bit different to the requirements in my first post. Not all numbers have to appear or to be hyperlinks. But they could without much hassle.

    I tested it in Firefox 1.0, Opera 7.53 and IE 6 on Windows XP and Konqueror on Linux.

    Take a look

    oerdec//

  4. #4
    SitePoint Evangelist figbeam's Avatar
    Join Date
    Jun 2004
    Location
    Sweden
    Posts
    508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice


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
  •