JS/jQuery Change Image on Hover of

Question

I have some HTML shown below, which is generated dynamically in an ASP Classic form.

There can be any amount of groups/tables (Size/Color) with any amount of rows/options.

Each group/table has an img tag, and each row/option has a hidden field with its corresponding image URL.

On the hover of each row, I need to change the src attribute of the image of that group to that row's image URL, using JS or jQuery (something that works in ASP classic).

The HTML can be changed if needed for it to work.

Thank you.

    <table>
    <tr>
        <td style="font-weight: 700" colspan="2">
            Color<input id="colorSortOrder" type="hidden" value="1" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioRed" type="radio" name="Color" value="R-" />
            <label for="radioRed">
                Red</label>
            <input type="hidden" value="Image1.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioOrange" type="radio" name="Color" value="O-" />
            <label for="radioOrange">
                Orange</label>
            <input type="hidden" value="Image2.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioBlue" type="radio" name="Color" value="B-" />
            <label for="radioBlue">
                Blue</label>
            <input type="hidden" value="Image3.jpg" />
        </td>
    </tr>
</table>
<table>
    <tr>
        <td style="font-weight: 700" colspan="2">
            Size<input id="sizeSortOrder" type="hidden" value="2" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioLarge" type="radio" name="Color" value="LA-" />
            <label for="radioLarge">
                Large</label>
            <input type="hidden" value="Image4.jpg" />
        </td>
        <td rowspan="3">
            <img />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioMedium" type="radio" name="Color" value="ME-" />
            <label for="radioMedium">
                Medium</label>
            <input type="hidden" value="Image5.jpg" />
        </td>
    </tr>
    <tr>
        <td>
            <input id="radioSmall" type="radio" name="Color" value="SM-" />
            <label for="radioSmall">
                Small</label>
            <input type="hidden" value="Image6.jpg" />
        </td>
    </tr>
</table>

...which looks something like:

enter image description here

Josh Bedo · Accepted Answer · 2012-09-06T14:54:04.567

2

I would change the HTML just a little bit to reduce the JavaScript parsing needed by adding data attributes for the image src like this

http://jsfiddle.net/muDJ9/

and with the use of JavaScript replace you can edit out extensions for the alt tags

EDIT: This also runs the fastest I just ran tests on the others submitted using the console.time() profiler

FINAL: http://jsfiddle.net/FV9cw/

edited Sep 06 '12 at 14:54

answered Sep 04 '12 at 16:24

Josh Bedo

3,410
3
21
33

My table ids and name attributes would be dynamic, so I'm trying to change the jQuery selectors to *$("table[id^='options'] tr").hover(function () { $("[name^='optionVal']").attr({ "src": $(this).data('img'), "alt": $(this).data('img') }); });* but *$("[name^='optionVal']"* doesn't seem to do it? Thanks. – Rivka Sep 04 '12 at 17:47
Say my html looks like this: http://jsfiddle.net/W6j5R/1/ where the id of each image starts with "optionImage". – Rivka Sep 04 '12 at 18:05
how about this EDIT: http://jsfiddle.net/L8cpK/ had to move image it was getting annoying – Josh Bedo Sep 04 '12 at 18:06
I need an image per table/group though. Just need to be able to reference the image and I think we're good. And then there's the HTML 5 support thing... – Rivka Sep 04 '12 at 18:14
data attributes work back to IE6 - http://stackoverflow.com/questions/2412947/do-html5-custom-data-attributes-work-in-ie-6 – Josh Bedo Sep 04 '12 at 18:26
Alright, and how do we reference the image per table? Possible, right? – Rivka Sep 04 '12 at 18:34
Thanks alot - that helped me get it working with the image where I had it (in the ). *var img = $(this).parent().parent().find("img");* – Rivka Sep 04 '12 at 19:14
Yup no problem glad I could help :) – Josh Bedo Sep 04 '12 at 19:28
1

BTW, not to go off topic, but none of the links on imstillreallybored.com work (for me) – Rivka Sep 04 '12 at 19:30
Yup I'm working on that I'm actually working on a series of video tutorials.. I just have to edit the .htaccess file the url redirection got messed up some how – Josh Bedo Sep 04 '12 at 19:32
Got the .htaccess sorted if you want to give it a look now :) – Josh Bedo Sep 05 '12 at 01:52

Alberto León · Answer 2 · 2012-09-04T19:37:38.517

1

$("input[type='radio']").hover(function(){
var src = $(this).parent().find("input[type='hidden']").val();
$(this).parent().parent().parent().find("img").attr("src",src);
});

Line 1 detects hover. Line 2 go up to td and looks for the hidden input inside td and takes the value Line 3 go up three times td > tr > table and looks for img and sets his attribute src with the image.

edited Sep 04 '12 at 19:37

answered Sep 04 '12 at 15:51

Alberto León

2,879
2
25
24

Thanks, this works but the selector includes the header row too. – Rivka Sep 04 '12 at 17:52
I was forgot the ] after 'radio' – Alberto León Sep 04 '12 at 19:38

score 1 · Answer 3 · answered Sep 04 '12 at 16:15

1

You can do it as under

Live Demo

$('label[for]').closest('tr').mouseenter(function(){  
    $(this).siblings().find('img').hide();
    $(this).find('img').attr('src', $(this).find('input[type=hidden]').attr('value')).show(); 
});

answered Sep 04 '12 at 16:15

Adil

146,340
25
209
204

Thanks. Tried your code but this seem to only work for the first row of the table. – Rivka Sep 04 '12 at 17:49

JS/jQuery Change Image on Hover of

3 Answers3