www.webdeveloper.com
Results 1 to 3 of 3

Thread: How can i make a popup window on a random array list

  1. #1
    Join Date
    Nov 2008
    Posts
    2

    Smile How can i make a popup window on a random array list

    Hello everyone,

    I'm having a problem sorting out how to make this work: I want to popup a window with discography information every time i make a mouseover movement over the image that corresponds to the cover of that disc. The problem is that this page that shows a gallery of all the covers of the discs of this band change every time i reload the page.

    Here is what i have done until the moment:

    <html>

    <head>
    <title>microondas</title>

    <link href="CSS/styles.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
    var disco = new Array(20);

    disco[0] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/1.jpg">< /a >';

    disco[1] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/200px-JamesTheCollection1.jpg" alt=" GOLD MOTHER"></a>';

    disco[2] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/COMPLETE SINGLES COLLECTION1.jpg"></a>';

    disco[3] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/GETTING AWAY WITH IT LIVE1.jpg"></a>';

    disco[4] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/JAMES1.jpg"></a>';

    disco[5] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/MILLIONAIRES5.jpg"></a>';

    disco[6] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/One-Man-Clapping6.jpg"></a>';

    disco[7] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/PLEASED TO MEET YOU7.jpg"></a>';

    disco[8] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/SEVEN8.jpg"></a>';

    disco[9] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/STUTTER2.jpg"></a>';

    disco[10] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/ULTRA3.jpg"></a>';

    disco[11] ='<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/Village Fire4.jpg"></a>';

    disco[12] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/WHIPLASH1.jpg"></a>';

    disco[13] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/HEY MA1.jpg"></a>';

    disco[14] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/STRIPE MINE1.jpg"></a>';

    disco[15] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/Jimone1.jpg"></a>';

    disco[16] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/LAID1.jpg"></a>';

    disco[17] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/Wah_Wah9.jpg"></a>';

    disco[18] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/BESTOF1.jpg"></a>';

    disco[19] = '<a href=""><img src="images/JAMES/JAMES DISCOGRAPHY/AN AWKWARD TURTLE1.jpg"></a>';

    function aleatorio(a,b) {
    return (Math.round(Math.random())-0.5);
    }



    </script>
    </head>

    <body>

    <script type="text/javascript">

    disco.sort( aleatorio );

    for(i=0; i<disco.length; i++) {
    document.write("<tr><td>" + disco[i] + "</td></tr>");
    }
    </script>
    </body>

    Please, if anyone could help me i would appreciate very much. Thanks!

  2. #2
    Join Date
    Apr 2008
    Location
    UK
    Posts
    76
    All handle mouse overs, all you need to do, is to change
    Code:
    <a href="">
    to

    Code:
    <a onmouseover="showMessage()" href="">
    However, you will have to differentiate between the different albums to show detailed information, i.e. passing a unique variable in the message.

    Personally, I would set the Id of the element to the array position, then pass the id when calling that function. For this to happen you would need to have as follows....

    Code:
    document.write("<tr><td id='" + i + "'>" + disco[i] + "</td></tr>");
    and then

    Code:
    <a onmouseover="showMessage(this.id)" href="">
    You might consider making the array multi-dimensional; this is the key part, as it allows you to easily relate the album to the alert information, as follows....

    Code:
    new Array(
      new Array("Album Image","Mouse Over Information"),
      new Array("Album Image","Mouse Over Information"),
      new Array("Album Image","Mouse Over Information"),
      ....
      new Array("Album Image","Mouse Over Information")
    )
    You then change

    Code:
    document.write("<tr><td id='" + i + "'>" + disco[i] + "</td></tr>");
    to

    Code:
    document.write("<tr><td id='" + i + "'>" + disco[i]["0"] + "</td></tr>");
    and then showMessage becomes...

    Code:
    function showMessage(id) {
       alert(disco[id][1]);
    }
    This is not the best way of doing it, for starters I wouldn't store all this information in arrays, however because of the existing structure and the situation you have described, it should set you on your way to making it work.

    Hope it helps,

    Also, as a personal opinion; If I was on a website that displayed an alert every time I mouse overed an image, I would be leaving very quickly.

  3. #3
    Join Date
    Nov 2008
    Posts
    2
    I was going almost mad because of this.

    I'm gonna see if it helps.

    However, this is for a school project, and one of the objectives is to make a page like with this kind of structre (not that i like it much).

    Thank you very much CuppyTea!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles