Passing array index value from img src trigger

Dev Shed Forums Sponsor:

December 3rd, 2012, 12:05 AM

Frank Lovejoy

Registered User

Join Date: Oct 2012

Posts: 3

Time spent in forums: 1 h 31 m 45 sec
Reputation Power: 0

Other - 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>

December 3rd, 2012, 02:13 AM

Winters

Super Moderator

Join Date: Jul 2003

Posts: 3,874

Time spent in forums: 1 Month 2 Weeks 1 Day 17 h 23 m 53 sec
Reputation Power: 2569

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?

Other - Passing array index value from img src trigger

Developer Shed Advertisers and Affiliates