How to connect an image rollover with a link rollover?

Question

how do you set up a link/image so when you hover an image, a link on the page turns to the hover state and vice versa?

Similar to what this site has: http://www.adrianlawrence.co.nz/

Any help would be great!

Thanks!

Answer 1

You can attach an event listener to one (image or link) to listen for mouseover. Have that fire a function which will find the element of the matching ID (image and link matching, ie image id = "image1", link id = "link1") and change the CSS.

Answer 2

Pure CSS and HTML can definitely be used to create an effect similar to the website you linked to.

Check out this fiddle .

1. Place both your link text and your image within one a element.
2. Give each of your images a distinct ID .
3. Use CSS to position your image absolutely (or relatively, your call) at the desired location.

The HTML:

<a href="www.google.com">
    Hello there.
    <img id="img1" src="[SOURCE]" alt="Be Happy!" />
</a>​

The CSS:

/* The Important Stuff */

#img1 {
    position:absolute;
    bottom:20px;
    right:45px;
}

a:hover {
    text-decoration:none;
}

a:hover img {
    opacity:.8;
}

/* The Unimportant Stuff */

body {
    background-color:black;
}

a {
    color:white;
}