468,306 Members | 1,232 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,306 developers. It's quick & easy.

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!

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
1 2087
Dormilich
8,651 Expert Mod 8TB
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.

Similar topics

5 posts views Thread by Raju V.K | last post: by
3 posts views Thread by Timmy | last post: by
6 posts views Thread by DeepaK K C | last post: by
8 posts views Thread by Joe Rattz | last post: by
4 posts views Thread by e_matthes | last post: by
14 posts views Thread by Abhi | last post: by
1 post views Thread by cnsabar | last post: by
reply views Thread by Teichintx | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.