By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,339 Members | 1,659 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,339 IT Pros & Developers. It's quick & easy.

Passing array index value from img src trigger

P: 5
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!

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html><head><title>PopupOverlay</title>
  3. <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
  4. <style>
  5. a:active {
  6.     outline:none;
  7. }
  8. :focus {
  9.     -moz-outline-style:none;
  10. }
  11. .simple_overlay {
  12.     display:none;
  13.     z-index:10000;
  14.     background-color:#fff;
  15.     width:260px;
  16.     min-height:300px;
  17.     border:1px solid #666;
  18.     -moz-box-shadow:0 0 90px 5px #000;
  19.     -webkit-box-shadow: 0 0 90px #000;
  20. }
  21. #triggers {
  22.   text-align:left;
  23.   }
  24. #triggers img {
  25.   cursor:pointer;
  26.   margin:0 5px;
  27.   background-color:#333;
  28.   border:1px solid #ccc;
  29.   padding:2px;
  30.   -moz-border-radius:4px;
  31.   -webkit-border-radius:4px;
  32.   }
  33. .details {
  34.   position:absolute;
  35.   top:15px;
  36.   right:15px;
  37.   font-size:15px;
  38.   color:#000;
  39.   width:220px;
  40.   }
  41. .details h3 {
  42.   color:#000;
  43.   font-size:17px;
  44.   }
  45.   </style>
  46. </head>
  47. <body>
  48.  
  49. <div id="triggers" class="noprint">
  50.   <img src="red.png?xx=1" rel="#mies1"/><BR>
  51.   <img src="green.png?xx=2" rel="#mies1"/><BR>
  52. <img src="blue.png?xx=3" rel="#mies1"/><BR>
  53. </div>
  54.  
  55. <script language="JavaScript">
  56. var myimages=new Array()
  57. myimages[1]="banana.png"
  58. myimages[2]="apple.png"
  59. myimages[3]="orange.gif"
  60. </script>
  61.  
  62. <script language="javascript">
  63. var info = new Array();
  64. info[1] = "Audi";
  65. info[2] = "Volvo";
  66. info[3] = "BMW";
  67. </script>
  68.  
  69. <div class="simple_overlay" id="mies1">  
  70.   <div class="details">
  71.     <h3>Heading</h3>
  72.     <script language="JavaScript">
  73. document.write('<img src="'+myimages[xx]+'">')
  74. </script>
  75.  
  76. <BR><B>Topic</B><BR>
  77.  
  78. <script language="javascript">
  79. document.write(info[xx])
  80. </script>
  81.   </div>
  82. </div>
  83.  
  84. <script>
  85.   $(document).ready(function() {
  86.       $("img[rel]").overlay();
  87.     });
  88. </script>
  89. </body>
  90. </html>
Dec 3 '12 #1
Share this Question
Share on Google+
1 Reply


Dormilich
Expert Mod 5K+
P: 8,639
when using document.write() after the page load (e.g. by executing it when you clicked on an image) it will cause your whole page to be destroyed.

the original problem with the click is, that you donít have a click handler assigned.
Dec 3 '12 #2

Post your reply

Sign in to post your reply or Sign up for a free account.