2 Replies - 444 Views - Last Post: 20 February 2014 - 12:23 PM

#1 Dictator_Rich  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 29-March 12

Trying to have an image link lead to a random website.

Posted 19 February 2014 - 09:02 PM

I am trying to make a website that has an image, and when the user clicks this image, it will take them to a random website out of 3 choices. I'm new to Javascript, so I am rather confused right now. I figured out how to set a text link to a random website, but I am having trouble figuring out how to change that text into a picture. This is what that particular line of code looks like:

<div id ="titlee"><CENTER><script language="Javascript">random_num = (Math.round((Math.random()*2)+1)); document.write("<a href=\"" + link[random_num] + "\"><img src="cooltext1436300913.png" alt="Error"></a>");</script></div>


See the part that says <img src="cooltext1436300913.png" alt="Error">? If I put text there instead, it works. I even tried to put <b> and <i> tags inside of it to see if HTML even works in it. The bold and italic worked, but for some reason, I can't get the picture to come up. It's totally blank when I try that code. I'm totally stumped. Does anyone know what the problem is?

This post has been edited by Dictator_Rich: 19 February 2014 - 09:06 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Trying to have an image link lead to a random website.

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3712
  • View blog
  • Posts: 5,964
  • Joined: 08-June 10

Re: Trying to have an image link lead to a random website.

Posted 20 February 2014 - 12:52 AM

What's causing your error is no doubt that you seem to have forgotten to escape the double-quotes for the img attributes. Remember, they are inside a string enclosed in double-quotes. If you don't escape double-quotes within double-quoted strings, rather than be put into the string, they'll close it and most likely cause a syntax error.


Having said that, I strongly advice AGAINST using this code. It's extremely outdated and poorly set up. It reminds me of something you'd see written for Netscape, in the 90's. - Today you rarely use document.write, and you elements like <center> have been replaced by CSS. Also, the <script language="Javascript"> attribute has long since been replaced by <script type="text/javascript">.

Let me demonstrate how what you posted really should be set up in modern code. - First, you'd need to separate the Javascript from the HTML and put that into a Javascript file. Then you'd need to create another file for the CSS styles. And, finally, you should combine all this into a proper HTML5 document.

Like so:
<!DOCTYPE html>
<html>
<head>
    <title>HTML5 example</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div id="titlee">
        <a id="titlee_link" href="">
            <img src="cooltext1436300913.png" alt="Error">
        </a>
    </div>

    <script type="text/javascript" src="random_image.js"></script>
</body>
</html>


/* File: main.css */

/* This would be equivalent to putting <center> around 
 * the inline contents of the #titlee div */
 
#titlee {
    text-align: center;
}


/* File: random_image.js */

(function() {
    // Whatever links you are planing to use.
    var links = [
        "http://link1.example.com/",
        "http://link2.example.com/"
    ];

    // Find the <a> element in the document. Note that this DOM method
    // finds elements based on their "id" attribute.
    var link = document.getElementById("titlee_link");
    
    // Get a random link from the list and assign it to the href
    // of the link element.
    link.href = links[Math.floor(Math.random() * links.length)];
}());


Was This Post Helpful? 1
  • +
  • -

#3 Dictator_Rich  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 21
  • Joined: 29-March 12

Re: Trying to have an image link lead to a random website.

Posted 20 February 2014 - 12:23 PM

Thank you so much, I got it working. I took the random link code from another tutorial (probably an old one), so I didn't quite realize the thing about escaping the quotes, but it's clear to me now. Also, I will take a look at the modern code suggestions. I learned HTML back in the early 2000's, and was kind of on and off with it, so I guess I have some bad habits to break. I do understand CSS, I just had <CENTER> there as kind of a quick thing. I am eventually going to separate to javascript from the HTML, but for now, I'm going to keep it like this until I have time to really go into depth with it, and figure out exactly what's going on. Thanks again.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1