Unobtrusive method for image resizing?

Discussion in 'Javascript' started by Animesh K, Jul 26, 2007.

  1. Animesh K

    Animesh K Guest

    I want to display the div containing "photo" when the thumbnail is
    clicked. One method is to put an "onclick" handler in the img tag, but I
    want to do this using the Unobtrusive method.

    I need to set the display CSS property of id="photo" to block or none.
    However, what handler should be used in the JS file?

    The HTML part:

    <div id="thumbnail">
    <img src="thumbnail.jpg">
    </div>

    <div id="photo">
    <img src="photo.jpg">
    </div>


    Thanks in advance,
    Animesh
    Animesh K, Jul 26, 2007
    #1
    1. Advertising

  2. Animesh K

    David Mark Guest

    On Jul 26, 4:49 pm, Animesh K <> wrote:
    > I want to display the div containing "photo" when the thumbnail is
    > clicked. One method is to put an "onclick" handler in the img tag, but I
    > want to do this using the Unobtrusive method.
    >
    > I need to set the display CSS property of id="photo" to block or none.
    > However, what handler should be used in the JS file?
    >
    > The HTML part:
    >
    > <div id="thumbnail">
    > <img src="thumbnail.jpg">
    > </div>
    >
    > <div id="photo">
    > <img src="photo.jpg">
    > </div>
    >
    > Thanks in advance,
    > Animesh


    Like this:

    <!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=UTF-8">
    <title>Unobtrusive Thumbnail</title>
    <script type="text/javascript">
    if (document.links && document.images) {
    document.write('<style type="text/css">#photo {display:none}<\/
    style>')
    window.onload = function() {
    var el = document.links['thumbnail'];
    if (el) el.onclick = function() {
    var elPhoto = document.images['photo'];
    if (elPhoto && elPhoto.style) elPhoto.style.display =
    (elPhoto.style.display == '')?'block':'';
    }
    }
    }
    </script>
    </head>
    <body>
    <script type="text/javascript">
    if (document.links && document.images) document.write('<div><a
    name="thumbnail" href="#photo" tabindex="0"><img src="thumbnail.jpg"
    alt="thumbnail"><\/a><\/div>');
    </script>
    <div><a name="photo"><img id="photo" name="photo" src="photo.jpg"
    alt="photo"></a></div>
    </body>
    </html>

    The tabindex is only there for Opera's benefit. It refuses to tab
    through links without it.
    David Mark, Jul 26, 2007
    #2
    1. Advertising

  3. Animesh K

    Animesh K Guest

    David Mark wrote:
    > On Jul 26, 4:49 pm, Animesh K <> wrote:
    >> I want to display the div containing "photo" when the thumbnail is
    >> clicked. One method is to put an "onclick" handler in the img tag, but I
    >> want to do this using the Unobtrusive method.
    >>
    >> I need to set the display CSS property of id="photo" to block or none.
    >> However, what handler should be used in the JS file?
    >>
    >> The HTML part:
    >>
    >> <div id="thumbnail">
    >> <img src="thumbnail.jpg">
    >> </div>
    >>
    >> <div id="photo">
    >> <img src="photo.jpg">
    >> </div>
    >>
    >> Thanks in advance,
    >> Animesh

    >
    > Like this:
    >
    > <!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=UTF-8">
    > <title>Unobtrusive Thumbnail</title>
    > <script type="text/javascript">
    > if (document.links && document.images) {
    > document.write('<style type="text/css">#photo {display:none}<\/
    > style>')
    > window.onload = function() {
    > var el = document.links['thumbnail'];
    > if (el) el.onclick = function() {
    > var elPhoto = document.images['photo'];
    > if (elPhoto && elPhoto.style) elPhoto.style.display =
    > (elPhoto.style.display == '')?'block':'';
    > }
    > }
    > }
    > </script>
    > </head>
    > <body>
    > <script type="text/javascript">
    > if (document.links && document.images) document.write('<div><a
    > name="thumbnail" href="#photo" tabindex="0"><img src="thumbnail.jpg"
    > alt="thumbnail"><\/a><\/div>');
    > </script>
    > <div><a name="photo"><img id="photo" name="photo" src="photo.jpg"
    > alt="photo"></a></div>
    > </body>
    > </html>
    >
    > The tabindex is only there for Opera's benefit. It refuses to tab
    > through links without it.
    >



    David, thanks for the detailed solution. I will be really indebted if
    you can explain the crucial parts of the solution.

    Also, I see you have <script> at two places. Can we just put all the
    scripts together or not?

    Many thanks,
    Animesh
    Animesh K, Jul 27, 2007
    #3
  4. Animesh K

    Animesh K Guest

    Animesh K wrote:
    > David Mark wrote:
    >> On Jul 26, 4:49 pm, Animesh K <> wrote:
    >>> I want to display the div containing "photo" when the thumbnail is
    >>> clicked. One method is to put an "onclick" handler in the img tag, but I
    >>> want to do this using the Unobtrusive method.
    >>>
    >>> I need to set the display CSS property of id="photo" to block or none.
    >>> However, what handler should be used in the JS file?
    >>>
    >>> The HTML part:
    >>>
    >>> <div id="thumbnail">
    >>> <img src="thumbnail.jpg">
    >>> </div>
    >>>
    >>> <div id="photo">
    >>> <img src="photo.jpg">
    >>> </div>
    >>>
    >>> Thanks in advance,
    >>> Animesh

    >>
    >> Like this:
    >>
    >> <!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=UTF-8">
    >> <title>Unobtrusive Thumbnail</title>
    >> <script type="text/javascript">
    >> if (document.links && document.images) {
    >> document.write('<style type="text/css">#photo {display:none}<\/
    >> style>')
    >> window.onload = function() {
    >> var el = document.links['thumbnail'];
    >> if (el) el.onclick = function() {
    >> var elPhoto = document.images['photo'];
    >> if (elPhoto && elPhoto.style) elPhoto.style.display =
    >> (elPhoto.style.display == '')?'block':'';
    >> }
    >> }
    >> }
    >> </script>
    >> </head>
    >> <body>
    >> <script type="text/javascript">
    >> if (document.links && document.images) document.write('<div><a
    >> name="thumbnail" href="#photo" tabindex="0"><img src="thumbnail.jpg"
    >> alt="thumbnail"><\/a><\/div>');
    >> </script>
    >> <div><a name="photo"><img id="photo" name="photo" src="photo.jpg"
    >> alt="photo"></a></div>
    >> </body>
    >> </html>
    >>
    >> The tabindex is only there for Opera's benefit. It refuses to tab
    >> through links without it.
    >>

    >
    >
    > David, thanks for the detailed solution. I will be really indebted if
    > you can explain the crucial parts of the solution.
    >
    > Also, I see you have <script> at two places. Can we just put all the
    > scripts together or not?]



    Actually I notice this cannot be done since CSS properties of a
    particular div-element are being written and this can be done in the
    body part only.

    Just explain the solution now :)

    Thank you,
    Animesh
    Animesh K, Jul 27, 2007
    #4
  5. Animesh K

    David Mark Guest

    On Jul 26, 7:51 pm, Animesh K <> wrote:

    > Just explain the solution now :)


    >
    > >> Like this:

    >
    > >> <!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=UTF-8">
    > >> <title>Unobtrusive Thumbnail</title>
    > >> <script type="text/javascript">
    > >> if (document.links && document.images) {


    Can't set up the handler without the first and the handler is useless
    without the second.

    > >> document.write('<style type="text/css">#photo {display:none}<\/style>')


    Hides the larger photo if CSS is enabled. Written with script so that
    the photo will not be hidden when script is disabled.

    > >> window.onload = function() {


    This anonymous function runs when the document is finished loading.

    > >> var el = document.links['thumbnail'];
    > >> if (el) el.onclick = function() {


    This one runs when the thumbnail is clicked.

    > >> var elPhoto = document.images['photo'];
    > >> if (elPhoto && elPhoto.style) elPhoto.style.display =
    > >> (elPhoto.style.display == '')?'block':'';


    Toggles the photo's display. When there is no inline style defined,
    the 'none' rule defined above takes precedence.

    > >> }
    > >> }
    > >> }
    > >> </script>
    > >> </head>
    > >> <body>
    > >> <script type="text/javascript">
    > >> if (document.links && document.images) document.write('<div><a


    Note this is the same test as before. You don't want a thumbnail if
    scripting is disabled or the onclick handler's required features are
    absent. In these cases, you just get a atatic photo with an anchor
    around it. If you have several photos, you might consider referencing
    them in bookmark links in your header.

    > >> name="thumbnail" href="#photo" tabindex="0"><img src="thumbnail.jpg"


    The link to "#photo" allows for logical behavior when scripting is
    enabled, but CSS is disabled (the photo scrolls into view if partially
    hidden) and it makes sense semantically. This is why the onclick
    handler does not return false.

    > >> alt="thumbnail"><\/a><\/div>');
    > >> </script>
    > >> <div><a name="photo"><img id="photo" name="photo" src="photo.jpg"
    > >> alt="photo"></a></div>
    > >> </body>
    > >> </html>

    >

    [snip]
    >
    > Actually I notice this cannot be done since CSS properties of a
    > particular div-element are being written and this can be done in the
    > body part only.


    You mean in the head, not the body.

    To finish up, you should move all of the code to functions in an
    external file. Then generalize it to work with multiple photos.
    Start by changing the photo style rule to use a class instead of an
    id. The onload handler will have to iterate through all the links in
    the document (or a predetermined container) and attach onclick
    handlers to those that contain thumbnails, so define a class for those
    images too. Define the height, width, border, etc. and check each
    link for the presence of this class of image before assigning the
    onclick handler. Then call the initialization function in the head of
    each document and the write function before each photo, passing its
    name attribute and the filename of the related thumbnail as
    parameters.

    That's all simple of course, but you may be asking how the onclick
    handlers will know which photo to display. One way is to name each
    thumbnail link based on the passed image name (eg myphoto1thumb,
    myphoto2thumb) as you can then reference this.name in the onclick
    handler and parse the related photo's image name. Alternatively, you
    can parse it before assigning each handler and use closures. Perhaps
    the simplest way would be to include the onclick attribute when you
    write the thumbnail link. It would look something like:

    onclick="toggleThumbnail('myphoto1')"

    If you do it the last way, you don't need the onload event or
    document.links.
    David Mark, Jul 27, 2007
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Thomas
    Replies:
    0
    Views:
    189
    Thomas
    Mar 3, 2005
  2. pantagruel
    Replies:
    2
    Views:
    275
    pantagruel
    Aug 10, 2005
  3. Animesh K

    Share your views on unobtrusive javascript

    Animesh K, Jul 20, 2007, in forum: Javascript
    Replies:
    23
    Views:
    252
    David Mark
    Jul 30, 2007
  4. lorlarz
    Replies:
    12
    Views:
    248
    Henry
    Jul 9, 2008
  5. Pil (Trustworthy from Experience)

    Resizing a div by resizing its borders

    Pil (Trustworthy from Experience), Apr 18, 2009, in forum: Javascript
    Replies:
    9
    Views:
    348
    Proper
    Apr 21, 2009
Loading...

Share This Page