[thelist] Javascript image function

Demitrius sbdemitrius at hotmail.com
Mon Nov 8 23:45:32 CST 2004


Hi, this is my first time posting here.
I need a little help with Javascript. I run a site that features a lot of 
images, and thus have a lot of thumbnails. I made up a code that lets the 
user click on an image and a popup window appears with an image, and if they 
click on that image the popup window closes... I'll disclose the code:

---

blahA = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'
+ '<html xmlns="http://www.w3.org/1999/xhtml"><head><meta 
http-equiv="imagetoolbar" content="no">'
+ '<script language="Javascript" src="../../../script.js"></script>'
+ 
'<style>body{background-color:black}img{position:absolute;top:0px;left:0px;border:none;z-index:1}'
+ 
'a,p{color:white}p{position:absolute;top:50%}</style></head><body><p>Loading...</p><a 
href="javascript:window.close();"><img src="';
blahB = '" alt="';
blahC = '" title="&quot;'
blahD = '&quot; &copy; ----- 2003-2004" /></a></body></html>';

function newWin(image,altText,mywidth,myheight)
{
    var myLeft = (screen.width-mywidth)/2;
    var myTop = (screen.height-myheight)/2;
  features = 'menubar=0,toolbar=0,location=0,'
              + 'directories=0,scrollbars=0,status=0,'
              + 'resizable=0,width='+mywidth+',height='+myheight+','
              + 'left='+myLeft+',top='+myTop;
  popWin = window.open('','newWin',features);
  popWin.document.open();

fullString = blahA + image + blahB + altText + blahC + altText + blahD;

  popWin.document.write(fullString);
  popWin.document.close();
}

---

A very choppy code, I know, but I'm new to this :)

And to link it I usually use:

<a 
href="JavaScript:newWin(_picture_,document.images[#].alt,_height_,_width_)"><img 
src="picture" title="Some title" alt="Alt text" /></a>

And this javascript makes a window with height _height_ and width _width_, 
and the _picture_ is inserted with the document.images[#].alt as its title, 
because the titles in my main page are sort of irrelevant. :)

The thing I'm bothered with is that I have to hardcode all of the #'s, and 
when removing old images, it gets to be hassle. Is there an easier way out 
of this? Like in Java's "nextInt" function, but I don't think it works in 
Javascript, since they're not the same.

Thanks.
Demitrius.

PS, if anyone wants to know where I got stuff to make this quote, it's from 
one of thelist's own posts
[http://lists.evolt.org/archive/Week-of-Mon-19990906/089729.html]
and [www.dhtmlshock.com]'s "Open Centered Popup Window Script" 


More information about the thelist mailing list