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');
});
});