Webmaster Forum - View Single Post

Costin Trifan · 11-23-2007, 06:18 AM

Code:

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    
    <style type="text/css">
        img { border: none 0; cursor: pointer; }
    </style>
    
    <script type="text/javascript">

function createImagePreview(imageID, windowName, windowFeatures)
{
    var imageSrc = document.getElementById(imageID).getAttribute('src');
    windowName = windowName || 'title';
    
    var thisImage = document.getElementById(imageID),
        _width  = thisImage.style.width,
        _height = thisImage.style.height;

    var features = "width="+_width+", height="+_height;

    windowFeatures = features || null;

    var popup = window.open(imageSrc, windowName, windowFeatures);
    popup.focus();
}


function preventNavigation()
{
    var markedLinks = document.getElementsByTagName("a");
    for ( var i in markedLinks)
    {
        if (markedLinks[i].className == "nav")
        {
            markedLinks[i].removeAttribute("href");
        }
    }
}
window.onload = preventNavigation;

    </script>
</head>
<body>
<a class="nav" href="test1.gif" onclick="javascript:createImagePreview('T1');"><img id="T1" alt="" src="test1.gif" style="width: 70px; height: 70px;" /></a><br /><br />
<a class="nav" href="test2.gif" onclick="javascript:createImagePreview('T2');"><img id="T2" alt="" src="test2.gif" style="width: 50px; height: 60px;" /></a><br /><br />
<a class="nav" href="test3.gif" onclick="javascript:createImagePreview('T3');"><img id="T3" alt="" src="test3.gif" style="width: 45px; height: 52px;" /></a><br /><br />
</body>
</html>

Now you have two functions:
- createImagePreview
- preventNavigation

The first one will create the popup window and the second one is used to prevent navigation away from the currently viewed page if someone will click one of your images (that is for those users that have javascript enabled).

However, the second function will be called only when the user will click the links that have the class "nav".

hope this helps