Unobtrusive method for image resizing?

A

Animesh K

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
 
D

David Mark

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
Click to expand...

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.
 
A

Animesh K

David said:
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
Click to expand...

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.
Click to expand...


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
 
A

Animesh K

Animesh said:
David said:
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
Click to expand...

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.
Click to expand...


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?]
Click to expand...


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
 
D

David Mark

Just explain the solution now :)
Click to expand...

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

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

This anonymous function runs when the document is finished loading.
var el = document.links['thumbnail'];
if (el) el.onclick = function() {
Click to expand...
Click to expand...
Click to expand...

This one runs when the thumbnail is clicked.
var elPhoto = document.images['photo'];
if (elPhoto && elPhoto.style) elPhoto.style.display =
(elPhoto.style.display == '')?'block':'';
Click to expand...
Click to expand...
Click to expand...

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

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.

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.
[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.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Simple, but difficult to me. Image border property 1
I am trying to detect Which image id="" was clicked ? 22
Help with Visual Lightbox: Scripts 2
Flip-Cards with Local Images 1
Image not changing between "mute" & "un-mute" images. 5
Help with code 0
Only one table shows up with the information 2
Having difficulty with the layout of these images / video for this web page 2

Members online

Total: 43 (members: 1, guests: 42)
Robots: 182

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,040
Latest member
papereejit

Latest Threads

Top