HTML / javascript image in specific cell

Question

Ok here is my questation. im stuck for a while

I have a table 3x3. In that table I have 5 images;

1st image is in the middle cell of the top row, saying "Home"
2nd, 3rd, & 4th images are in the middle row
- 2nd image is in the left column and says "Software"
- 3rd image is in the middle of the table and displays my logo
- 4th image is in the right column and says "Forum"
5th image is in the 3rd row, middle cell and says "About"

So I want to keep the logo image (in the center of table) displayed until user hovers over one of the 4 categories (Home, Forum, Software, About). When they hover over the category, the middle image should become an image representing that specific category.

For example, if user hovers over Software image (left column, middle row), logo image would be replaced with image representing Software.

Sorry for bad language and I hope you get idea of what I want to do

It would be helpful, if you share the relevant code you tried so far. — defau1t, Sep 19 '13 at 17:49
i went through so much code, none of it was remotely close to what I want to do — Igor Zelić, Sep 19 '13 at 17:51
you could try pasting what you tried. Somebody would have some pointers for you. — defau1t, Sep 19 '13 at 17:52
Also, where's you're structure? There are so many possible solutions to this question... I thought of two before I even finished reading your question. Do you want it asynchronous, or do you want all the content to be loaded with your website? — Kiruse, Sep 19 '13 at 17:54
Well, there's a point where you need to understand enough to write your own code. "Going through so much code" is simply reusing third party code, there's nothing creative there. I think you need to understand the basics first. — Kuba hasn't forgotten Monica, Sep 19 '13 at 19:14

score 1 · Answer 1 · answered Sep 19 '13 at 19:07

This should get you in the right direction.

HTML

<table>
    <tr>
        <td id=""><a href="#"></a></td>
        <td id="home"><a href="#">Home</a></td>
        <td id=""><a href="#"></a></td>
    </tr>
    <tr>
        <td id="software"><a href="#">Software</a></td>
        <td id="logo"><a href="#">Logo</a></td>
        <td id="forum"><a href="#">Forum</a></td>
    </tr>
    <tr>
        <td id=""><a href="#"></a></td>
        <td id="about"><a href="#">About</a></td>
        <td id=""><a href="#"></a></td>
    </tr>
</table>

jQuery

var logoBlock = $("#logo");
$("a").hover(
    function(){
        logoBlock.find("a").text( $(this).text()+" is Hovered" );
    },
    function(){
        logoBlock.find("a").text("Logo");
    }
);

http://jsfiddle.net/daCrosby/MvWYD/

Nice, concise example. +1 Missed the part about grabbing the SRC= attr data, but well laid-out and easy to understand. Well done. — cssyphus, Sep 20 '13 at 17:45

cssyphus · Accepted Answer · 2013-09-19T19:18:41.923

0

Is this what you want to do?

jsFiddle here

HTML:

<table id="tbl">
    <tr><td></td><td><img id="hom" src="http://png-2.findicons.com/files/icons/1261/sticker_system/128/home.png"></td><td></td></tr>
    <tr>
        <td>
            <img id="swr" src="https://cdn1.iconfinder.com/data/icons/ecommerce-and-business-icon-set/256/software.png">
        </td>
        <td>
            <img id="lgo" src="http://graph.facebook.com/1671019266/picture?type=large">
        </td>
        <td>
            <img id="frm" src="http://wespenre.com/graphics/forum-icon.png">
        </td>
    </tr>
    <tr id="tr2"><td></td><td><img id="abt" src="http://png-3.findicons.com/files/icons/730/soft/128/info.png"></td><td></td></tr>
</table>

javascript/jQuery:

/*
    See these posts:
    http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery

*/

var img_logo = $('#lgo');
$('img').hover(
    function() {
        var xx = $(this).attr('src');
        img_logo.attr('src', xx);
    },
    function() {
        img_logo.attr('src', "http://graph.facebook.com/1671019266/picture?type=large");
    }
);

edited Sep 19 '13 at 19:18

answered Sep 19 '13 at 18:32

cssyphus

37,875
18
96
111

yea, something like that, difference would be a text rather then those pictures on up, down,left and right, tho middle would be static. When user hovers over that text, middle image would become one of these images you placed up/down/left/right – Igor Zelić Sep 19 '13 at 19:08
I'm an anal coder, apologies. I cleaned up your Fiddle a bit. http://jsfiddle.net/daCrosby/kVhDg/1/ – DACrosby Sep 19 '13 at 19:11
Better. Thanks. Replaced link in answer with yours. – cssyphus Sep 19 '13 at 19:18
BRO Thank you this is just perfect, and what I was looking for. THANKS MAN... off to set it up!!! – Igor Zelić Sep 19 '13 at 19:18
@IgorZelić If this is helpful, please accept as correct answer to close the question. – cssyphus Sep 19 '13 at 19:20

HTML / javascript image in specific cell

2 Answers2