Display multiple images on rollover.
I am trying to create a tour map application where a rollover of a dot displays several images and text. I have this working using the following combination of css, jQuery and <a> tag.
Unfortunately this approach results in all of the image areas causing the other images to display. As the tour map will be quite dense, I need to limit the rollover action to the "MapDot".
This page is online at http://www.surfinghydrangea.com/GardenTour.php
Many thanks to anyone with a working approach!
Here are the significant elements:
<script type="text/javascript">
$(document).ready(function(){
//Set opacity on each span to 0%
$(".rollover").css({'opacity':'0'});
$(".rollover2").css({'opacity':'0'});
$(".rollover3").css({'opacity':'0'});
$('.courtyard a').hover(
function() {
$(this).find('.rollover').stop().fadeTo(200, .5);
$(this).find('.rollover2').stop().fadeTo(200, 1);
$(this).find('.rollover3').stop().fadeTo(200, 1);
},
function() {
$(this).find('.rollover').stop().fadeTo(200, 0);
$(this).find('.rollover2').stop().fadeTo(200, 0);
$(this).find('.rollover3').stop().fadeTo(200, 0);
}
)
});
</script>
css:
.courtyard {
display:block;
width:23px;
height:23px;
position: absolute;
top: 436px;
left: 295px;
}
.courtyard a {
display:block;
/*width:82px;
height:71px;
position: absolute;
top: 436px;
left: 295px;*/
}
.courtyard a .rollover {
display:block;
position:absolute;
/*top: 436px;
left: 295px;
width:82px;
height:71px;
background:url(../Image/TourCourtYard.png);*/
}
.courtyard a .rollover2 {
display:block;
position:absolute;
top: 100px;
left: 100px;
width:82px;
height:71px;
background:url(../Image/TourCourtYard.png);
}
.courtyard a .rollover3 {
display:block;
position:absolute;
top: -400px;
left: 100px;
width:200px;
height:200px;
}
<div class="tourContainer">
<!--<div class="leftColumn">-->
<h1>Nursery Tour</h1>
<div class="courtyard">
<a href="#">
<span class="rollover"></span>
<span class="rollover2"></span>
<span class="rollover3">The Courtyard is full of a lot of good stuff.</span>
<img src="../Image/MapDot.png" alt="" /></a>
</div>
<!--</div>
<div class="rightColumn">
</div>-->
</div>