SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    does this actually work?

    yesterday I inquired if someone knew how to easily modify the following (among other questions!)

    http://www.tonibanks.com/jkelly/test_popup.htm

    Code:
     <HTML> 
     <HEAD> 
       <TITLE>The Image Gallery</TITLE>
       <script language="Javascript"> 
       function PopupPic(sPicURL) { 
    	 window.open( "popup.htm?"+sPicURL, "",  
    	 "resizable=1,HEIGHT=200,WIDTH=200");} 
       </script> 
     </HEAD> 
    <BODY bgcolor="#666666">
    <a href="javascript:PopupPic('/JKelly/images/wedding_full/001.jpg')"><img src="/JKelly/images/wedding_thumb/001t.jpg" border="0"></a><br> 
       <a href="javascript:PopupPic('/JKelly/images/wedding_full/002.jpg')"><img src="/JKelly/images/wedding_thumb/002t.jpg" border="0"></a><br> 
       <a href="javascript:PopupPic('/JKelly/images/wedding_full/003.jpg')"><img src="/JKelly/images/wedding_thumb/003t.jpg" border="0"></a><br> 
    </BODY> 
    </HTML>
    to allow users with javascript disabled to still view the popup full sized image picture - I don't know asp or php.

    I tried this code modification (first image only). It seems to work in IE6, Netscape 7 and Opera 7, but unfortunately I don't know much about javascript either - so can someone check it out and see if this is actually usable? Also are there implications for older versions of these browsers? (back to v 4?)

    http://www.tonibanks.com/jkelly/test_popup2.htm

    Code:
     <HTML> 
     <HEAD> 
       <TITLE>The Image Gallery</TITLE>
       <script language="Javascript"> 
       function PopupPic(sPicURL) { 
    	 window.open( "popup.htm?"+sPicURL, "",  
    	 "resizable=1,HEIGHT=200,WIDTH=200");} 
       </script> 
     </HEAD> 
    <BODY bgcolor="#666666">
    <a href="/JKelly/images/wedding_full/003.jpg" onclick="javascript:PopupPic('/JKelly/images/wedding_full/003.jpg'); return false;" target="newWin"><img src="/JKelly/images/wedding_thumb/003t.jpg" border="0" width="108" height="72"></a><br>
    <a href="javascript:PopupPic('/JKelly/images/wedding_full/001.jpg')"><img src="/JKelly/images/wedding_thumb/001t.jpg" border="0"></a><br> 
       <a href="javascript:PopupPic('/JKelly/images/wedding_full/002.jpg')"><img src="/JKelly/images/wedding_thumb/002t.jpg" border="0"></a><br> 
       <a href="javascript:PopupPic('/JKelly/images/wedding_full/003.jpg')"><img src="/JKelly/images/wedding_thumb/003t.jpg" border="0"></a><br> 
    </BODY> 
    </HTML>
    thanks
    dare to Dream, dare to Be...
    www.eodweb.com

  2. #2
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    and Mozilla - works in Firebird...
    dare to Dream, dare to Be...
    www.eodweb.com

  3. #3
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, that's a great way to do it, although it's more efficient to do the onclick this way

    onclick="PopupPic(this.href); return false;"
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  4. #4
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    will it still open the new window if the browser's javascript is disabled?
    dare to Dream, dare to Be...
    www.eodweb.com

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the idea - instead of writing the href twice - you just use the DOM to grab the one you already wrote!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry to keep at this but I don't really know javascript - I'm just trying to wing it here . So the final line should look like this?

    Code:
     <a href="full pic path" onclick="PopupPic(full pic path); return false;"><img src="thumbnail pic path" border="0" width="108" height="72"></a><br> 
    ? also, what is DOM? I mean, I think it's document object model - but what is that (in this example)?

    thanks beetle - you've been really helpful!

    Toni
    dare to Dream, dare to Be...
    www.eodweb.com

  7. #7
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, DOM means document object model. That is, the pre-exposed properties of objects. Three key things are working in the example I showed you

    1) In an even handler, like onlick, you can use the this keyword to refer to the element that the handler resides on.

    2) Since <a> element's href attribute is exposed as a property in the DOM, you can access the value of that href via elemReference.href.

    3) Many events can be canceled, simply by returning false - this cancels their default action.

    So, if you just do this
    Code:
    <a href="some/path/pic.gif" onclick="alert(this.href);">link</a>
    Then you will be alerted with "some/path/pic.gif" !! (and also be linked to the pic)

    That's why using the same property reference works for the function - that way to don't have to type the image path twice. Change it in the href, and that's it!
    Code:
    <a href="/JKelly/images/wedding_full/001.jpg" onclick="PopupPic(this.href);return false;">
       <img src="/JKelly/images/wedding_thumb/001t.jpg" border="0">
    </a>
    Since we return false, the default action (link you to the pic) doesn't take place. But, if a non-javascript user reachers your site, they can still click the link and see the picture!
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  8. #8
    SitePoint Addict TBanks's Avatar
    Join Date
    Jan 2003
    Location
    Earth:\USA\California
    Posts
    228
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the explanation Beetle! I have another one for you (or anyone else who can help!), if you are so inclined - how can I make a javascript workaround (for people who disable it) on this page?
    Code:
     <html>
    <head>
    <title>display2</title>
    <script language="javascript">
    function changePict(pict){
    document.pictToChange.src=""pict
    }
    </script>
    </head>
    <body bgcolor="#666666">
    <table width="50" border="0" cellspacing="5" cellpadding="0" style="float: left">
    <tr><td><a href="#" onClick="changePict('/JKelly/images/wedding_full/002.jpg')"><img src="/JKelly/images/wedding_thumb/002t.jpg" border="0"></a></td></tr>
    <tr><td><a href="#" onClick="changePict('/JKelly/images/wedding_full/003.jpg')"><img src="/JKelly/images/wedding_thumb/003t.jpg" border="0"></a></td></tr>
    </table>
    <img src="/JKelly/images/wedding_full/002.jpg" name="pictToChange" width="432" height="288">
    </body>
    </html>
    I tried replacing the '#' in the href with the path and replacing the onclick function with 'this.href' but it doesn't work.

    here's the page online:
    www.tonibanks.com/display2.htm - the original page is now at www.tonibanks.com/display1.htm

    thanks!
    dare to Dream, dare to Be...
    www.eodweb.com


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •