How To Change Background Image On Hover Of Different Div

This topic is empty.

Viewing 15 posts - 1 through 15 (of 51 full)

Posts
March 23, 2012 at 12:04 am #37302

Hi anybody!

I am looking to create the next effect for my next website:

1) I have 3 DIVs with some text content in the left cavalcade.

two) I take an paradigm in a div in the right column.

iii) Image in the correct div take three unlike independent epitome parts, each separate part has to be highlighted when I hover over one of the divs (related to that particular image part) in the cavalcade on the left. The DIV I am hovering over has to be highlighted as well on hover.

4) I besides want the aforementioned consequence simply this time when I hover over whatever of those epitome parts in DIV on in the right column. I want it to highlight the related div, as well as highlight image part itself.

I know information technology all might sound really confusing, so I made a motion-picture show hopefully explaining my projection visually. (bank check the attached image).

Now I am non sure if this can exist solely achieved with use of only CSS, or by combination of CSS and jQuery or smn.

If anyone always encountered similar implementation, or knows where I tin observe a code example, or could direct me in the correct direction, I would actually appreciate it!!!

March 23, 2012 at 12:37 am #99738

Here is a CSS version for you: http://jsfiddle.cyberspace/joshnh/daFDn/

You could set the default image every bit the background of the unordered list, and and then place each corresponding image in the image tags provided.

Indicate 4 cannot exist done with CSS, and I'm not sure of the best way to do it.

March 23, 2012 at 4:51 am #99743

Actually information technology's unproblematic in 1 direction, hovering div highlights rightside.Just hovering 1 of the righdiv'southward element to highlight a previous element is a big claiming, maybe mission incommunicable but I will wait for solutions.

Left column:

< div id="id1" < a href="#">DIV1
< div id="id2" >< a href="#" >DIV1
< div id="id3" >< a href="#" >DIV1
< div id="rightDiv" >
< a id="id1match">
< a id="id2match">
< a id="id3match">

CSS:

#rightDiv a { background:url(region.png) no-repeat 0 0;position:absolute;left:0;top:0 }
#rightDiv a#id1match { left:number;acme:number }
…
#id1:hover { background:green }
#id1:hover ~ #rightDiv a#id1match { background-position:0 -100px }
#id2:hover ~ #rightDiv a#id2match { groundwork-position:0 -500px }

Of course this solution is not perfect because the regions take to be non rectangular, and then yous have to use image map.Simply I will look into this problem in these days and will get back to yous but you should know, with javascript you tin solve it hands.

Update:

Viceversa you could simulate a trigger outcome on left side like this:

< div id="rightside">
< a id="id1match" class="region">
< a id="id2match" class="region">
< a id="id3match" class="region">

< div id="fakeDiv1" class="fake" >DIV1
< div id="fakeDiv2" class="simulated">DIV2
< div id="fakeDiv3" course="faux">DIV3

CSS:
…
.fake { position:absolute;top:0}
#id1match:hover ~ fakeDiv1 {left:-80x;top:0} // relative to #rightside div
#id2match:hover ~ fakeDiv2 {left:-80x;top:200px} // 200px acme of a div from left
#id2match:hover ~ fakeDiv2 {left:-80x;tiptop:400px}

If yous don't desire to utilize extra markup, you could only use :

#id1match:hover:earlier {content:'DIV1′;position:absolute…. }
…

March 23, 2012 at 5:43 am #99745

Hullo Have done something like:

http://www.rcicruiseholidays.com/destinations.php

use firebug to expect at the css,
good luck,
Michel

March 23, 2012 at xi:39 am #99772

Wow thx for all of the replies, guys. I am going to spend today trying to implement whatever of these solutions.

So far my thoughts are:

@ joshuanhibbert : I similar you version, and I might merely settle for 1-3 steps solution for now. I tried adding image urls and information technology works like a charm. However I have ane question : how practice I set the image for neutral (passive) state, when at that place is no mouseover presented. So far, when I take mouse away from divs on left, there is empty function on right, I desire there to be a default image.

@ jozsef : Thanks for all the code, including the updated version, notwithstanding when I put information technology in http://jsfiddle.net , it doesn't piece of work as intended. If you could exam it in in that location and be kind to drop a link to your solution, I would exist very grateful!

@ michelm : I similar the site you've built a lot! The map from link looks impressive, however I couldn't notice any independent divs that would trigger those parts of map on mouseover . And then far the only way to highlight the part of map is to bespeak mouse at it straight, I demand to have divs with some text which, when mousedover, volition trigger highlights on main epitome.

March 23, 2012 at 12:45 pm #99781

Afterward rereading joshuanhibbert's answer I found he already mentioned the solution, my bad:) I've updated it already http://jsfiddle.net/daFDn/4/ . Cheers man, you are the best!

March 23, 2012 at 5:55 pm #99809

Sorry for the missunderstanding.My code was not functional, it was ment for analogy purposes merely.I've made a functional demo for you, with colors just,promise it's understandable.The yellow should be the colorless map, the greyness should be invisible link positioned on every region, when hovering on link, it get's a background with the colour filled region.As I said before, it's not perfect because the regions overlap other regions, because the links are rectangle forms, not shapes.So for perfecton you demand an image map solution but for know here it is my demo:

http://jsfiddle.net/gU4sw/7/

March 23, 2012 at 9:35 pm #99819

wow Joseph, this is exactly what I was looking for!!!! Thank you and then much, Ill attempt to adjust it for my needs at present!

I really love this forum, and how helpful people here.

March 23, 2012 at 9:37 pm #99820

I still cant believe yous've done information technology with only using CSS, its mind-blowing!

March 23, 2012 at 11:45 pm #99823

One more question, when i endeavor to add my final code (http://jsfiddle.internet/gU4sw/13/) to wordpress page, information technology breaks :(

Am I doing something wrong? :)

March 24, 2012 at iii:24 am #99826

You have to be more specific and so that.Where is your implementation of this code in wordpress?

one. Anyway, might be that wordpress puts some actress tags in your structure and the general siblings selector(~) works only with sibling tags, you lot can't traverse up ane level to the parent to look for it'south sibling tags.So the html part has to remain the aforementioned way as in your concluding lawmaking in jsfiddle.The left side div-s can't take a wrapper.

2. Maybe yous allready have i of those id-south or classes defined in wordpress css.

March 24, 2012 at 3:49 am #99827

One more affair, in case your left side text color doesn't change on hover only the groundwork, and then it'south not necesarry to add all the same text in the fake divs.Y'all can leave the fake div'due south empty, perhaps a nbps to exist valid, and give the left side tags a z-index bigger and so your faux div, and for the left side containers(#id1,#id2…) a z-alphabetize lower so your fakediv.This way the text doesn't repeat on every item.

Ex.
.fake {z-index:60}
.item { z-index:l;position:relative }
.item * {z-index:70;position:relative}

1 more than affair.It's not ok to wrap block elements with a link.Or you lot put the link on every tag, or the better y'all position the link on your content:

.detail a {background:url(transpareng.gif) repeat; position:absolute;left:0;top:0;width:100px;elevation:100px}

The transparent.gif is 1px in dimensions and it'southward transparent.It's used simply for flicker bugs in ie on hover.

June 19, 2012 at eleven:02 am #104580

Great solution! Does anyone know how you can apply a fading effect on this. Then that the pictures fade smoothly in and out when hovering over the links. I tin just get the tags to fade but I want the images to fade in and out. Sorry for the bad english!

/Oskar from Sweden

June 19, 2012 at 12:26 pm #104591

Another selection is to use a plugin built specifically for this… check out mapper.js or maphilight for jQuery.

June twenty, 2012 at three:fourteen am #104641

#rightDiv a {
opacity: 0;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
-o-transition: opacity .25s ease-in-out;
}

#rightDiv a:hover {
opacity: ane;
}
Author

Posts