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!
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>
Comment