getting a text rollover to change the imgborder color of an image (and vice versa)?

Discussion in 'CSS' started by motionphi, May 17, 2010.

0
  1. #1
    Hi, I posted a question yesterday, and I now have a similar but more specific question.

    My site has a bunch of "badges," each of which contains an image with a text link underneath. On some of the badges, there are 2 or 3 unique text links.

    http://www.motionphi.com

    When the user rolls over the image, I would like the imgborder color to change but ALSO the text link color to change, and vice versa. Currently they both do this, but independently of one another.

    I don't want to make the entire badge a link, because in the cases where there are 2-3 links underneath the image, they need to remain unique links.

    Is this possible with my current HTML/CSS code?

    Much thanks in advance for any help.

    DS
     
    motionphi, May 17, 2010 IP
  2. Boogy

    Boogy Active Member

    Messages:
    36
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    73
    #2
    You may have to use JavaScript...like this..
    <a href="" title="" onmouseover="document.getElementById('').style.border=5px solid #999; this.style.color=red"></a>

    not sure this is what you want..but it should make the img border whatever color you want and also change color of text link to whatever color you want.
    In the above, you fill in appropriate info between quotes...you can use hex colors or maybe regular words like red, black or blue.
     
    Boogy, May 17, 2010 IP
  3. CooganA

    CooganA Peon

    Messages:
    12
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yes you can, and like boogy said you can only achieve something like this in Javascript, I personally like using jQuery to achieve these types of effects.

    You can add jquery to your site by adding it into the head tag.

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    Then add a script that creates the hovers

    <script type="text/javascript">

    $(document).ready(function(){
    $(".links").hover(
    function () {
    $("#imageId").attr("class","imgWithBorder");
    },
    function () {
    $("#imageId").attr("class","imgWithoutBorder");
    }
    );
    });

    </script>

    Then your html will be like this.

    <img id="imageId" src="image.jpg" class="imgWithoutBorder" alt="image name"/>

    <a href="page1" class="links">page 1</a>
    <a href="page2" class="links">page 2</a>
    <a href="page3" class="links">page 3</a>

    And your styles would be like:

    .imgWithoutBorder {
    border: 0;
    }

    .imgWithBorder {
    border: 1px solid #ffcc00;
    }

    For the links your can just use the hover in css.

    .links {
    color: #ffcc00;
    }

    .links:hover {
    color: #ffffff;
    }

    Hope this makes sense.
     
    CooganA, May 22, 2010 IP
    Boogy likes this.