noob question- popdown image change

Zas · Jun 16, 2003

I was wondering if there was a way where a user could have a drop down menu to select an image from a forum, and once they select one the image pops up so they can look at it, and possibly change the image, where another one would pop up once they change it again, etc..
Possible? If so, how?

Happieness is like peeing your pants.
Everyone can see it, but only you can feel the warmth.

BatGrrrL · Jun 16, 2003

Hi Zas,

You could try something simple like this:

Have your thumbnails as <img> with a A HREF around them:

<a href="#" onClick="card.src='/images/ecards/BigImage.jpg';">

And your main image called "card" (in this example)

<img src="/images/ecards/blank.jpg" name="card" width="496" height="234" border="0">

You just feed the card.src of whichever big image you want displayed.

Its a simple way, maybe someone has something better?

Cheers
BatGrrrL

BatGrrrL · Jun 16, 2003

And this is the code to do it with a drop down box

Note: the three images I used were in the same directory as my script.

<html><head>

<script language="javascript" type="text/javascript">

</script>

</head><body>
<form name="myForm">

<select name="myImages" onChange="image_go();">
<option value="amy.gif">First</option>
<option value="one.gif">Second</option>
<option value="ralph.gif">Third</option>
</select>

</form>

<img src="amy.gif" name="card" width="496" height="234" border="0">
</body>
</html>

Zas · Jun 16, 2003

weeee tanks u

Happieness is like peeing your pants.
Everyone can see it, but only you can feel the warmth.

scriptOhead · Jun 17, 2003

Here's a way to dynamically generate a window and resize it to the pic size.

var str = " ";
var w;
var topPos = 0;
var leftPos = 0;
var wt = 0;
var ht = 0;
var picName = "";

function getPic(pn, m, n)
{
if(screen)
{
leftPos = (screen.width - m)/2;
topPos = (screen.height - n)/2;
wt = m;
ht = n;
}
picName = pn;
w = window.open("","","toolbars=no,scrollbars=no,resizable=no,directories=no,location=no,left="+leftPos+",top="+topPos+",width="+wt+",height="+ht);
str = "<body marginwidth='0' marginheight='0' topmargin='0' leftmargin='0'>";
str += "<a href = \"javascript:self.close()\"><img src = ";
str += picName.toString();
str += " border = '0'><\/a>";
str += "<\/body>";
writeWin();
}

function writeWin()
{
if(w && w.open)
{
w.focus();
w.document.open();
w.document.write(str);
w.document.close();
}
else
{
writeWin();
}
}

and for the link put-

<a href="#" onclick="getPic('images/myPic.jpg',320,427);return false">

~mgb

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

noob question- popdown image change

Zas

Programmer

BatGrrrL

Programmer

BatGrrrL

Programmer

Zas

Programmer

scriptOhead

Technical User

Similar threads

Part and Inventory Search

Sponsor