Rollover text/img-based link to show an image
I found a flash piece on a website I'd like to emulate using JQuery: http://www.jbcoxwell.com/construction_services.html
In searching this site, I found one post useful as the basis for starting my script: Show #id - hide #id when hover another #id
I got as far as getting the hover to work and show the photo area. I'm more of a novice enthusiast and sometimes have problems with syntax and such, but when it really broke down is when I tried to target the id of the text link on rollover and match it to the image. I am not sure how to match the text with the right image. I know that using an ID twice is a no-no, so how do I group two items in likeness but also separate them when it comes to functionality?
Here is my html code:
<body><div id="container">
<div class="text" id="txt1">Service 1</div>
<div class="text" id="txt2">Service 2</div>
<div class=开发者_开发问答"img" style="display: none" id="img1">Photo 1</div>
<div class="img" style="display: none" id="img2">Photo 2</div></div></body>
My CSS:
#img1 {
background-image: url(image/img1.jpg);
background-color: red;}
#img2 {
background-image: url(image/img2.jpg);
background-color: blue;}
.text {
width: 150px;
height: 15px;
background-color: #7a7a7a;
float: left;
clear: left;
margin-bottom: 25px;}
.img {
width: 300px;
height: 100px;
float: right;}
And my .js file:
$(function() {
// define the mouseover event for text
$('.text'+this.id).mouseover(function() {
$('.img').css('display', 'block');
});
// define the mouseout event for text
$('.text'+this.id).mouseout(function() {
$('.img').css('display', 'none');
});
});
I've spent time looking through this and other sites for snippets here and there but I seem to keep going in circles. I'd love to understand where I'm going wrong with this. Thank you for your time!
*Edit: Here is the most functional version I was able to make this: http://jsfiddle.net/aburgin/EKb4E
Try this: http://jsfiddle.net/hAsX3/2/
You ended up using the ids #1 and #2 for multiple elements - don't do that. I stored the id of the corresponding element in the text element's data attribute.
<div id="container">
<div class="text" id="image1">Service Name 1</div>
<div class="text" id="image2">Service Name 2</div>
<div class="img image1" style="display: none" id="1">Photo 1</div>
<div class="img image2" style="display: none" id="2">Photo 2</div>
</div>
$(function() {
// define the mouseover event for text
$('.text').mouseover(function() {
$('.' + $(this).attr("id")).css('display', 'block');
});
$('.text').mouseout(function() {
$('.' + $(this).attr("id")).css('display', 'none');
});
});
http://jsfiddle.net/jensbits/EKb4E/56/
Thanks to Dennis & Jen I was able to use their answers to come up with a nearly complete script to mimic the example in my original post. I used the structure of Jen's script but included the nifty trick shared by Dennis. The data text names are used in my up/over image names so I could piece them together while manipulating them in the script. The only part missing is having the hovered item stay visible until another item is hovered. But this is something I will try to figure out on my own. Here is what I was able to put together:
HTML:
<div id="serv_list">
<div id="text_list">
<div class="text" id="img1" data-text="serv1" style="background-image: url(services/serv1_up.png);"></div>
<div class="text" id="img2" data-text="serv2" style="background-image: url(services/serv2_up.png);"></div>
</div>
<div id="img_list">
<div class="img img1" style="display: none" id="1"></div>
<div class="img img2" style="display: none" id="2"></div>
</div>
</div>
CSS:
#serv_list {
margin-top: 20px;}
.img1 {
background-image: url(services/serv1.jpg);}
.img2 {
background-image: url(services/serv2.jpg);}
#text_list {
float: left;
width: 200px;}
.text {
width: 200px;
height: 18px;
float: left;
clear: left;
margin-bottom: 25px;}
#img_list {
float: right;
width: 450px;}
.img {
width: 450px;
height: 300px;
float: right;
clear: both;}
JS:
$(function() {
$('.text').mouseover(function() {
var bg = $(this).data("text");
$('.' + $(this).attr("id")).css('display', 'block');
$(this).css('cursor','pointer');
$(this).css('background-image', 'url(services/' + bg + '_ovr.png');
});
$('.text').mouseout(function() {
$('.' + $(this).attr("id")).css('display', 'none');
$(this).css('background-image', 'url(services/' + $(this).data("text") + '_up.png');
});
});
加载中,请稍侯......
精彩评论