0 Replies - 247 Views - Last Post: 30 October 2013 - 09:24 AM

#1 dashrendar  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 30-October 13

onlcik image positioning inside DIV

Posted 30 October 2013 - 09:24 AM

Hello, I have a horizontal image gallery of 20 thumbs that scrubs nicely inside a DIV. I want to create an image swap for each thumb based on the 'onclick' event and it's proving elusive... the gallery is based on this horizontal gallery http://manos.malihu...._multiple.html#

I can get the onclick image swap effect working with a function controlling the visibility as below, the issue arises when I add to additional images:

When the onclick calls the hidden layer it becomes visible but it always appears to top left of the container DIV, not relative to the image actually clicked.

 

<script language="javascript">
                function newwindow() {
                    var showme = document.getElementById("leathercode");
                    showme.style.visibility = "visible";

var showme2 = document.getElementById("leather");
                    showme2.style.visibility = "hidden";
                }

 function closewindow() {
                    var showme = document.getElementById("leathercode");
                    showme.style.visibility = "hidden";

var showme2 = document.getElementById("leather");
                    showme2.style.visibility = "visible";
                }
            </script>




This is my image nested inside the DIV

 
<div class="jTscroller">

<div id="leather" style="position:relative; z-index:1">
<a href="#" onclick="newwindow()"><img src="thumbs/img1.jpg" /></a>
</div>

<div id="leathercode" style="position:absolute;  visibility: hidden; z-index:2">
<a href="#" onmouseleave="closewindow()"><img src="thumbs/img1A.jpg" /></a>
</div>

</div>



I've also tried adding a simple image swap but no go... same problem so I thought best to stick with DIV since hopefully there is a simple way to control there position in this instance.

Any help is much appreciated!

This post has been edited by Dormilich: 30 October 2013 - 10:02 AM
Reason for edit:: please use [CODE] [/CODE] tags when posting code


Is This A Good Question/Topic? 0
  • +

Page 1 of 1