CODEWITHSUNDEEP
javascripthtmlcss
User2468
User2468

Reputation: 99

Setting a td so that it links to javascript with onclick

Here is my html:

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td id="1">
                <div>
                    <span>
                        Link 1
                    </span>
                </div>
            </td>
        </tr>
    </table>
</div>

<div id="box">
    <img src="iow panorama.png" id="one"/>
    <img src="iow panorama 2.png" id="two"/>
</div>

And my CSS:

#sidebar {
    display: inline-block;
    height: auto;
    width: auto;
    font-family: Garamond;
    font-size: large;
}

#table1 {
    border: 1px solid black;
    text-align: center;
}

#table1 th {
    border: 1px solid black;
}

#table1 td {
    border: 1px solid black;
}

#box {
    position: relative;
    height: 200px;
    width: 1200px;
}

#box #one,#two {
    position: absolute;
    top: 0px;
    left: 0px;
}

#one {
    visibility: hidden;
}

#two {
    visibility: hidden;
}

#1 {
    background-color:red;
    cursor: pointer;
}

And Javascript:

$("#1").click(function(){
    var z = parseInt($("#one").css("z-index"));
    z =+ 10;
    $("#one").css("z-index", z);
})

Now what I want to happen is the cursor to change to a pointer over the td, and when it is clicked, it triggers the javascript which makes the first image visible but not the second as they are overlayed. Also, the td isn't changing color, even though the CSS should be making it red. What I think is happening is the whole thing is failing at the table/td part of it. How can I fix it so that all of it works? (Also, how do I set the javascript to cause the z-index of the second image to decrease, so I can use another link in the table to create a kind of slideshow, with links to choose the image?)

Upvotes: 0

Views: 80

Answers (3)

talemyn
talemyn

Reputation: 7950

You've got multiple issues going on here:

  1. 1 is not a valid HTML id value for many browsers. HTML 4 requirements for id values are:

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed
by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"),
colons (":"), and periods (".").

    This is the cause of the red background style not applying to the td. HTML5 will eventually allow the value that you are using, but you will find many browsers not ready to support that fully.

  2. You're images are both set to visibility: hidden;, but you never change that in your JS. Neither image will ever display, until you set it's visibility value to visible, regardless of what its z-index value is.

  3. Depending on the operating system where your assets are hosted, you may run into issues with your the file names of your images having spaces in them. I would recommend not doing that . . . use and underscore instead of spaces, for example.

UPDATE

Actually, the issue with the id starting with a digit appears to be tied to CSS3 specifications for valid id selectors, rather than the HTML specification support. According to the CSS3 spec, the selector must be a "CSS Identifier", which . . . can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they **cannot start with a digit**, two hyphens, or a hyphen followed by a digit. (emphasis added)

Upvotes: 1

Jay M
Jay M

Reputation: 103

here's a working example, id of elements shouldn't start with a number though.

<div id="sidebar">
<table id="table1">
    <tr>
        <th>Table</th>
    </tr>
    <tr>
        <td id="d1">
            <div>
                <span>
                    Link 1
                </span>
            </div>
        </td>
    </tr>
</table>


$("#d1").click(function(){
    $("#one").css("visibility","visible");
})

jsfiddle demo

Upvotes: 0

Ashok Gj
Ashok Gj

Reputation: 168

It would be better to provide id for the link than providing id for td

Also as you are going to make a link ( tag)it will automatically have cursor:pointer css.

It would be even better to use rel tags to relate the link and image

I couldnt properly understand your question. However I've made a JS FIDDLE. Hope this helps you. Since you've used $("#1").click() I assume you've used jQuery and I used the same in my code too.

JSFIDDLE

html

<div id="sidebar">
    <table id="table1">
        <tr>
            <th>Table</th>
        </tr>
        <tr>
            <td>
                <a href="javascript:;" rel="img1">Link1</a>
            </td>
            <td>
                <a href="javascript:;" rel="img2">Link2</a>
            </td>            
        </tr>
    </table>
</div>

<div id="box">
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/cant-believe-it-icon.png" id="img1"/>
    <img src="http://icons.iconarchive.com/icons/artdesigner/emoticons-2/256/too-much-icon.png" id="img2"/>
</div>

js

$('a').click(function(){
    imgid = $(this).attr('rel');
    $('a').removeClass('active');
    $(this).addClass('active');

    $('img').hide();    
    $('#'+imgid).fadeIn('slow');
});

Hope it helps

Upvotes: 0

Related Questions