Rollover image connected to link

Discussion in 'CSS' started by DeluxeEdition, Jan 1, 2007.

0
  1. #1
    I don't know if I'm having a brain fart or what because I've spent the last 3 hours trying to figure out something that should be simple (I would think).

    Basically I want to have an image that is next to the link rollover to a new image when the link is hovered over along with the link rolling over to a new color.

    Here's what I'm working with:

    
.rightlink {
	float: right;
	padding: -25px 20px 4px 10px;
	font-size: 14px;
	background: url(../images/car-silver.gif) no-repeat;}

.rightlink a
{background: url(../images/car-silver.gif) no-repeat;}
.rightlink a:hover
{background: url(../images/car-red.gif) no-repeat;}
    Code (markup):
    The code above makes the image appear behind the text and I tried using bullets with image but half the image and text gets cut off.

    Any help would be great.

    Thanks
     
    DeluxeEdition, Jan 1, 2007 IP
  2. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #2
    What does the HTML you have for this dis-jointed rollover look like so far?
     
    Dan Schulz, Jan 3, 2007 IP
  3. DeluxeEdition

    DeluxeEdition Active Member

    Messages:
    308
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    58
    #3
    Here is what I am using so far to try to get the CSS to Work.

    
<div class="rightlink"><a href="">Link Text Here</a><br />
<a href="">Link Text Here</a> </div>
    Code (markup):

    Here is "sort of" what I'm talking about but I have such a hard time explaining it http://www.tutorio.com/media/css-tutorials/rollover-example.htm but with the text being to the right of the image not inside the image as this example shows - Hope that makes sense
     
    DeluxeEdition, Jan 3, 2007 IP
  4. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I'd start by marking that up as a list of links. Let me see what I can come up with, ok?
     
    Dan Schulz, Jan 4, 2007 IP
  5. DeluxeEdition

    DeluxeEdition Active Member

    Messages:
    308
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    58
    #5
    Thanks Dan! I appreciate the help
     
    DeluxeEdition, Jan 4, 2007 IP
  6. feeleash

    feeleash Peon

    Messages:
    29
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>

    <style type="text/css">

    .gallery {
    position: relative;
    }

    .rightlink {
    background-color: transparent;
    color: black;
    text-decoration: none;
    }

    .rightlink:hover {
    background-color: transparent;
    color: red;
    text-decoration: none;
    }

    .rightlink span {
    position: absolute;
    padding: 5px;
    left: -1000px;
    visibility: visible;
    color: red;
    text-decoration: none;
    }

    .rightlink:hover span {
    visibility: visible;
    top: 5px;
    left: 48px; /*position where enlarged image should offset horizontally */
    }

    img.first {
    margin-left:10px;
    margin-top:10px;
    }

    </style>


    </head>

    <body>

    <div class="gallery">
    <a class="rightlink" href="#">image2<span><img src="1.jpg" border="0px" /></span></a><img class="first" src="2.jpg" border="0px" />
    </div>

    </body>

    </html>

    Is this it? Beware you will have to align every image 1 to the image 2 and of course both of them must be the same size... I dunno if that will help you but it's a start.
     
    feeleash, Jan 4, 2007 IP
  7. DeluxeEdition

    DeluxeEdition Active Member

    Messages:
    308
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    58
    #7
    I'll give a try tonight - Thanks so much for the help, I was about to give up on the idea
     
    DeluxeEdition, Jan 5, 2007 IP