Lightbox viewer in image maps

[chechu]

1) Script Title: Light box viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: Is it possible to have the lightbox by clicking from an image map ? The below code doesn't work, so how would it ?

<MAP NAME="imgmap">
<AREA SHAPE=rect COORDS="105,10,151,46" HREF="http://www.cecicasariego.com/img/imggroot/PTabuelo.gif" rel="lightbox" title="<font color='#666666'>&nbspHr. Roger Mazereel (21 x 33 cm)<br>&nbspkleurpotlood op papier<p></font>">
</MAP>
<img src="indexlogo2.gif" border="0" USEMAP="#imgmap">

[jscheuer1]

This is actually a bit easier than I thought. The lightbox.js file needs one modification. Find this:

	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('a');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

Change it to this:

	initialize: function() {	
		if (!document.getElementsByTagName){ return; }
		var anchors = document.getElementsByTagName('*');

		// loop through all anchor tags
		for (var i=0; i<anchors.length; i++){
			var anchor = anchors[i];
			
			var relAttribute = String(anchor.getAttribute('rel'));
			
			// use the string.match() method to catch 'lightbox' references in the rel attribute
			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
				anchor.onclick = function () {myLightbox.start(this); return false;}
			}
		}

Now, about your call - using font tags in the title attribute may cause problems. You should style the text in the lightbox.css file. Here is where the style is set in the lightbox.css file for the information displayed from the title attributes:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

[chechu]

And this is just fantastic !!
For other people that follow this:
I could keep a bit of the html in the code itself (<title>), and added an <alt>, so what you get onmouse-over is the <alt> (see code)

<AREA SHAPE=rect COORDS="105,10,151,46" HREF="http://www.cecicasariego.com/PT.gif" rel="lightbox" alt="Roger" title="Hr. Roger Mazereel (21 x 33 cm)<br>kleurpotlood op papier<p>">
And in the head (to fix the color of the title):
<style>
#caption {color:#666666;}
</style>

And in the css:

#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
             margin-left: 2 auto;
	}

I am a happy man !! Thanks !