Show & hide different <img> with same class

Question

I have this html code created with javascript.

$(".timeline-points").prepend( "<div class='vd-cues''></div>" );

$(".vd-cues").css('left',p/d*100+"%"); //bullets position on the progress bar

$(".timeline-points").prepend("<img class='preview-img' src='./vids/out/"+f+"' height='80px'></img>");

$(".preview-img").css('left',p/d*100-7+"%");

And what I want is to get the preview-img when the mouse is over a specific vd-cues. So, when the mouse is over the first vd-cues the first image should be show, and on the second vd-cues the second image should be show, and so on...

I've tried several approaches, but I can't get this to work. I think it's because I'm creating HTML with jQuery, and also because I'm calling the function OverBullets to soon.

http://jsfiddle.net/7R36G/1/

Answer 1

I have to confess that I'm a little frustrated because no one really helped me with my question. However I thank you all for your support and attention to the classes.

I have solved my problem with parent and child approach, and also with a simple line of CSS.

However I have to dismiss the class approach you've suggested because I don't know how to specify the left value to each of the class, like it happens when I use ids.

So what I did was changed the second prepend to vd-cues and so I've created a child preview-img with a parent vd-cues. Then I've used the "#parent:hover #child" to display the correct image when mouse is over, and voilá :)

http://jsfiddle.net/7R36G/3/

Answer 2

id is unique in HTML document.

Better approach is to use class and hide those

<img class="preview" src="...">
<img class="preview" src="...">

jQuery

$('img.preview').hide()

Answer 3

id is unique in HTML document.
Better use name. So that you can achieve what you need.
you can get all the elements by using

getElementsByName("name")

this will return all the elements with same name. Check its visibility if it is visible change it to not visible state and change the hidden thing to visible state.
That's it. Done.