check if such image already exists

[witold]

Hi, I'm using a fancy script to view pop-up images on my site. Images are linked with products so customers are expected to browse my little gallery over and over again. The point is, that when they return to the same product another pop-up of the same image appears - even if it already exists!!

I need a piece of coding that would check if an image already exists and if it does prevent another one from opening.

Here is what I use (some part is borrowed and some made up on my own):

----------------------------
function CaricaFoto(img){
foto1= new Image();
foto1.src=(img);
Controlla(img);
}
function Controlla(img){
if((foto1.width!=0)&&(foto1.height!=0)){
viewFoto(img);
}
else{
funzione="Controlla('"+img+"')";
intervallo=setTimeout(funzione, 20);
}
}

function viewFoto(img){
largh=foto1.width+20;
altez=foto1.height+20;
stringa="width="+largh+",height="+altez;
finestra=window.open(img,"",stringa);

//check to see if this window already exists
if(finestra.foto1.img) {
finestra.close();
} else {
finestra.focus();
}
}
-----------------------------

witold

[Charles]

Give each IMAGE element a distinct "name", and then when you open the window pass this name as the second parameter to the "Window.open()" method. You'll need to rewrite your method a little. Instead of passing the HREF to your function, pass the Image object itself.Id est:

<script type="text/javascript">
<!--
function newWin (img) {
var cache = new Image();
cache.src = img.href;
var height = cache.height < 80 ? 100 : cache.height + 20;
var width = cache.width < 80 ? 100 : cache.width + 20;
var geometry = 'height=' + height + ',width=' + width;
var myWin = window.open (img.href, img.name, geometry);
}
// -->
</script>

<a href="http://www.bettiepage.com/images/photos/bikini/bikini1.jpg" name="bettie1" onclick="return newWin(this)">Bettie</a>

[witold]

OK. I think my previous post needs some explanation. All images are in a drop-down list. I have 3 such lists in different categories on one page. So when I need to open a pop-up image i reference to values stored by a given selection e.g.

<select name="outdoor" onChange="javascript:CaricaFoto('../dealers/pos_order/' + document.history.outdoor.value);">
<option value="">--Choose--</option>
<option value="file1.jpg">product1</option>
<option value="file2.jpg">product2</option>
<option value="file3.jpg">product3</option>
</select>

When I change between different products at the same time different images pop-up on the page. Some of them may do so a couple of times. All I need is a solution to prevent the same image from appearing more than once.

[Charles]

That does make things a bit more difficult. Expecially because you need to stop making your page JavaScript dependent. A full 13% of users do not use JavaScript (http://www.thecounter.com/stats/2003/May/javas.php) and because that number includes certain users who cannot use JavaScript because of dicabilities it may be illegal for you to make this page JavaScript dependent. If you are in the US the law in question is Title III of the Americans with Disabilities Act. (http://www.usdoj.gov/crt/ada/pubs/ada.txt) Title III applies the accessibility requirements to commercial enterprises.

I would suggest that your form submit itself to a simple little server side script that returns the appropriate redirect header. Then use the form's "onsubmit" handler to open a new window with the appropriate name and to change the value of the form's "target" attribute accordingly. You'll need to set up a bunch of Objects, one for each image, that pair the image addresses with their names.

[Charles]

Here's a slightly easier method. For ease I've assumed that all of the images are in the same directory and have the same, '.jpg' extension. First, get something like the following up and running and named "image.pl":

#!user/local/bin/perl
use CGI qw(redirect param);
my $base = 'http://www.bettiepage.com/images/photos/bikini/';
my $image = param 'image';
print redirect "$base$image.jpg";

And then the HTML and JavaScript would look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<title>Example</title>
<script type="text/javascript">
<!--
function newWin (name) {
var href = 'http://www.bettiepage.com/images/photos/bikini/' + name + '.jpg';
var cache = new Image();
cache.src = href;
var height = cache.height < 80 ? 100 : cache.height + 20;
var width = cache.width < 80 ? 100 : cache.width + 20;
var geometry = 'height=' + height + ',width=' + width;
var myWin = window.open (href, name, geometry);
return false;
}
// -->
</script>
<form action="image.pl" onsubmit="return newWin(this.image.value)">
<div>
<select name="image">
<option value="bikini1">Image 1</option>
<option value="bikini2">Image 2</option>
<option value="bikini3">Image 3</option>
<option value="bikini4">Image 4</option>
</select>
</div>
<div><button type="submit">View</button>
</form>