Pass image name to function

@toicontienFeb 08.2008 — #In order to make your script web accessible, an <a> tag with the HREF pointing to the image is the recommended way to go:
[code=html]<a href="/images/path/to/photo.jpg" onclick="PopupPic(this.href); return false;"><img ... ></a>[/code]
It's accessible for one main reason. The image links are keyboard accessible. In your case, since you are linking to images and search engine optimization would probably do very little, you could try this markup:

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <title>Image Popup Script</title>
 
  <script type="text/javascript">
   function PopupPic(btn) {
   // Browser compatibility check
   if (!document.getElementsByTagName) return;
 
   var img = btn.getElementsByTagName("img")[0];
 
   window.open(img.src, "_blank", "width="+img.clientWidth+", height="+img.clientHeight);
   }
  </script>
 
  <style type="text/css" media="screen">
   .imgPopup {
   background: transparent none;
   border-width: 0;
   cursor: pointer;
   display: inline;
   margin: 0;
   padding: 0;
   }
 
   .imgPopup img {
   vertical-align: bottom;
   }
  </style>
 
 </head>
 <body>
 
  <button type="button" class="imgPopup" onclick="PopupPic(this);"><img src="http://www.webdeveloper.com/forum/images/webdev-logo2.gif"></button>
 
 </body>
 </html>[/code]

The BUTTON element is keyboard accessible, though it relies entirely on JavaScript.

Pass image name to function

1 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Pass image name to function

1 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

1 Comments(s) _↴

Also in #JavaScript _↴