#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2012
    Posts
    3
    Rep Power
    0

    Passing array index value from img src trigger


    I have googled everywhere but cannot find a solution.
    Hopefully someone can help me here!?

    By clicking a trigger image, I want to also pass an index value to my object inside my document.write text array and image array.
    Simply adding ?xx=1 to the clicked img src does not work.
    There must be some work-around that will succeed.
    Passing this index value will save a lot of repetitious coding.
    Thanks for any help!

    Code:
    <!DOCTYPE html>
    <html><head><title>PopupOverlay</title>
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
    <style>
    a:active {
        outline:none;
    }
    :focus {
        -moz-outline-style:none;
    }
    .simple_overlay {
        display:none;
        z-index:10000;
        background-color:#fff;
        width:260px;
        min-height:300px;
        border:1px solid #666;
        -moz-box-shadow:0 0 90px 5px #000;
        -webkit-box-shadow: 0 0 90px #000;
    }
    #triggers {
      text-align:left;
      }
    #triggers img {
      cursor:pointer;
      margin:0 5px;
      background-color:#333;
      border:1px solid #ccc;
      padding:2px;
      -moz-border-radius:4px;
      -webkit-border-radius:4px;
      }
    .details {
      position:absolute;
      top:15px;
      right:15px;
      font-size:15px;
      color:#000;
      width:220px;
      }
    .details h3 {
      color:#000;
      font-size:17px;
      }
      </style>
    </head>
    <body>
    
    <div id="triggers" class="noprint">
      <img src="red.png?xx=1" rel="#mies1"/><BR>
      <img src="green.png?xx=2" rel="#mies1"/><BR>
    <img src="blue.png?xx=3" rel="#mies1"/><BR>
    </div>
    
    <script language="JavaScript">
    var myimages=new Array()
    myimages[1]="banana.png"
    myimages[2]="apple.png"
    myimages[3]="orange.gif"
    </script>
    
    <script language="javascript">
    var info = new Array();
    info[1] = "Audi";
    info[2] = "Volvo";
    info[3] = "BMW";
    </script>
    
    <div class="simple_overlay" id="mies1">  
      <div class="details">
        <h3>Heading</h3>
        <script language="JavaScript">
    document.write('<img src="'+myimages[xx]+'">')
    </script>
    
    <BR><B>Topic</B><BR>
    
    <script language="javascript">
    document.write(info[xx])
    </script>
      </div>
    </div>
    
    <script>
      $(document).ready(function() {
          $("img[rel]").overlay();
        });
    </script>
    </body>
    </html>
  2. #2
  3. No Profile Picture
    Super Moderator
    Devshed Specialist (4000 - 4499 posts)

    Join Date
    Jul 2003
    Posts
    4,009
    Rep Power
    2791
    Stop using buzz words as they are just rendering your question meaningless.

    A GET method query string is generally used to send data to the server. It is used in some cases for client-side pass-over but would be an overly laborious method in this instance.

    There are a series of images that when clicked should send the appropriate index key to your script, to select the appropriate image url from an array and insert it into the document?

    Should the output image change each time, or should multiple images be created?
    [PHP] | [Perl] | [Python] | [Java] != [JavaScript] | [XML] | [C] | [C++] | [LUA] | [MySQL] | [FirebirdSQL] | [PostgreSQL] | [HTML] | [XHTML] | [CSS]

    W3Fools - A W3Schools Intervention.

IMN logo majestic logo threadwatch logo seochat tools logo