...

View Full Version : dynamic image generation for javascript pop on



wargarden
05-25-2009, 12:26 AM
thanks in advance for any help given.

I am working on a css/javascript coding, to allow a clicked thumbnail to open up a div window, gray out the background and display the image with a close box.

The problem I'm having is I can get the div to open, gray out the background, and get the close button to reset everything but I cannot get the image tag to work properly. If there were only 1 image to worry about I could hard-code it, but with multiple images to work with, I don't know where I need to put the code:

index3.html


<!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="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<link rel="stylesheet" type="text/css" href="stylesheet/index3.css" />
<script type="text/javascript" src="javascript/index3.js"></script>
<body>


<div id="overlay"></div>
<div id="popup">
<br />
<input type="button" value="close" onclick="popclose();" />
</div>

<a href="javascript:popup('tapir')"><img src="tapir.jpg" /></a>
<a href="javascript:popup('shark')"><img src="shark.jpg" /></a>
<a href="javascript:popup('arma')"><img src="arma.jpg" /></a>
</body>
</html>

index3.css


@charset "utf-8";
/* CSS Document */

#pop-open{
display: block;
margin: 200px auto 0 auto;
}

#overlay, #popup {
display: none;
position: absolute;
}

#overlay {
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000000;
opacity: 0.5;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.50;
z-index: 14;
}

#popup {
top: 80px;
left: 80px;
width: 320px;
height: 200px;
line-height: 100px;
text-align: center;
background: #cccccc;
border: 1px solid #999999;
z-index: 15;
}

index3.js


/*function popup(artpic) {
document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
}*/

function popclose() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
}



function popup(artpic) {
imgName = "" + artpic + ".jpg"


document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
<!--document.getElementById('popup').write('<img src = "imgName">');-->
<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->

}


note the commented script in the js file is simply because, I'm the type that comments things out until I get things working, then I go back and clean up a file.

I tried to use the document.write similar to what you can do with a javascript popup, but either I'm not targeting the div correctly or there is something else I don't know in order to target it.

should mention I'm not formally trained in javascript, I just learn by trying to do something until I hit a roadblock...such as this one haha.

once again, thanks for any help.


hosted the files for view

http://www.wargarden.net/tutorials/javascript/dynamicpopon/index3.html

click on one of the images and you see what I'm talking about, just need the appropriate image to appear in the box, tapir for tapir, shark for shark, etc...

thanks again

Old Pedant
05-25-2009, 09:05 PM
Why not K.I.S.S.???



function popup(name)
{
document.getElementById("popimg").src = name + ".jpg";
document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
}

and then:

<div id="popup">
<img id="popimg" alt="popup image" />
<br />
<input type="button" value="close" onclick="popclose();" />
</div>


Don't create tags dynamically unless you really need to. There's nothing wrong with an <img> tag with no src= used as a placeholder.

wargarden
05-25-2009, 11:22 PM
first, thanks for the help. Tried the changes you implemented, so that my .js file looks like this:


function popclose() {
document.getElementById('overlay').style.display = 'none';
document.getElementById('popup').style.display = 'none';
}



function popup(artpic) {

document.getElementByID("popimg").src = artpic + ".jpg";
document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';

<!--imgName = "" + artpic + ".jpg"-->
<!--document.getElementById('popup').write('<img src = "imgName">');-->
<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->

}

and the body of the html looks like this:


<body>


<div id="overlay"></div>
<div id="popup">
<img id="popimg" alt="popup image" />
<br />
<input type="button" value="close" onclick="popclose();" />
</div>

<a href="javascript:popup('tapir')"><img src="tapir.jpg" /></a>
<a href="javascript:popup('shark')"><img src="shark.jpg" /></a>
<a href="javascript:popup('arma')"><img src="arma.jpg" /></a>
</body>

as seen here: http://www.wargarden.net/tutorials/javascript/dynamicpopon/index3.html

but the document.getElementByID('popimg').src = artpic + ".jpg"; line in the .js file is breaking the code and causing an error. If I comment it out , it'll open up the new window with a broken image tag, but left in, the pop on does not appear at all.

going to continue to work on this.

EDIT:by reversing the placement of the popimg line, I get the grey block to show up, it's just not seeing the image.


function popup(artpic) {

document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
document.getElementByID("popimg").src = artpic + ".jpg";

<!--imgName = "" + artpic + ".jpg"-->
<!--document.getElementById('popup').write('<img src = "imgName">');-->
<!--artpic.document.write('<a href="javascript:self.close()">close</a>');-->

}

Old Pedant
05-26-2009, 01:04 AM
Look really really really closely at your JavaScript code:


function popup(artpic) {

document.getElementById('overlay').style.display = 'block';
document.getElementById('popup').style.display = 'block';
document.getElementByID("popimg").src = artpic + ".jpg";
}

If you would turn on debugging or at least look at the error messages you are getting you would see the problem.

Here, let's emphasize the difference:


document.getElementById('popup').style.display = 'block';
document.getElementByID("popimg").src = artpic + ".jpg";

JavaScript is case sensitive. Might I *strongly* suggest that you start using a Debugger when working with JavaScript? The most usable is probably Firebug, used with FireFox, but even the MS debugger is better than none at all.

Good luck!

wargarden
05-26-2009, 01:26 AM
that was it, thank you Old Pedant



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum