ansaurus

Question

Question about hyperlinking a Javascript Object

Answer 1

A:

Anchor tag?

<style type="text/css">

#buy_button_image { display: none; }

</style>

<script type="text/javascript">

window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
    img.style.display = "block";
};
window.setTimeout(_t, 5000);
window.clearTimeout(_t);
};
</script>

</head>

<body>
<a href="http://www.stackoverflow.com"&gt;&lt;img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"&gt;&lt;/a&gt;
</body>
</html>

Luke Schafer 2010-10-12 22:28:02

that will work but the anchor tag would still be "visible" in the page. Someone could accidentally click it or select it.

Cfreak 2010-10-12 22:30:20

@Cfreak - not if the anchor tag is set to display none and the image is inside - see my answer.

Peter Ajtai 2010-10-12 22:32:48

@Peter that's not what his solution shows. His a tag has no id attached

Cfreak 2010-10-13 14:05:53

@Cfreak - Exactly. I am suggesting something else, which is attaching the ID to the `A` tag and setting the visibility of the `A` tag to `none`.

Peter Ajtai 2010-10-13 18:18:22

@Cfreak and @Peter - yeah sure, those are better solutions. I didn't spend, well, any time on it because it shows 5 seconds after page load, and I'm sure he would learn better by figuring out that by himself. However, you are both absolutely right.

Luke Schafer 2010-10-13 22:13:52

Answer 2

+1 A:

Change this:

<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"&gt;

To:

<div id="buy_button_image"><a href="http://google.com/"&gt;&lt;img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"&gt;&lt;/a&gt;&lt;/div&gt;

Cfreak 2010-10-12 22:29:04

Why do you need to wrap the `a` tag in a `div`? Seems superfluous.

Peter Ajtai 2010-10-12 22:38:17

@peter you don't have to, I like to do it because then you are explicitly hiding all the elements in the div. It makes it easier to then go back and make changes later. For instance someone wants some other element or text that shouldn't be linked but should still display the same way as the button.

Cfreak 2010-10-13 14:07:39

Answer 3

+1 A:

Use an a tag:

Note that your clearTimeout does nothing. Take a look at the setTimeout() and clearTimeout() references.

<html>
<head>
<style type="text/css">    
    #buy_button_image { display: none; }
</style>

<script type="text/javascript">
window.onload = function()
{
    var img = document.getElementById("buy_button_image");
    var _t = function() {
        img.style.display = "block";
    };
    window.setTimeout(_t, 5000);
};
</script>

</head>

<body>
    <a href="http://www.pumaskills.com" id="buy_button_image">
        <img style="border: medium none ;" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"&gt;
    </a>
</body>
</html>

Try it out with this jsFiddle

Peter Ajtai 2010-10-12 22:30:41

Thank you Peter. This worked perfectly. I appreciate the help from everyone!

Yemi Ogunbase 2010-10-13 01:15:29

@Yemi - Glad to hear it ;) Don't forget to accept my answer if it solved your problem (check mark outline right below the votes of an answer).

Peter Ajtai 2010-10-13 01:18:13

ansaurus

tags:

views:

answers:

Question about hyperlinking a Javascript Object

Try it out with this jsFiddle

related questions