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!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

A Nextel-like Image Swap Drop Down Menu? 3

Status
Not open for further replies.
danielh68

danielh68

Technical User
Jul 31, 2001
431
US
Hi,

I initially posted this question under Dreamweaver, but I'm beginning to think this category is more appropriate. Anyhow, I'm trying to create an image swap via a drop down menu. As a perfect example visit

Particularly, the 2004 NASCAR NEXTEL Cup Series. That's what I want to accomplish. I viewed the source...well, actually I copied and pasted it into DW and changed the paths structure to use my own images. Unfortunately, as a test, it failed.

I noticed near the top, the page refers to a .js file, so maybe that has something to do with it. I combed many Javascript sites hoping to find a tut or existing code, but none are like this particular creature.

Can anyone provide me with some help?

Thanks, Dan
 
Sort by date Sort by votes
Hi Dan,
You need more than the HTML source, you also need any associated .js files and maybe even .css files.

But I hope you are aware that this particular menu is probably copyrighted.

You will find similar menus on or try google:





<!--#sig value=''É'' url='' -->
 
Upvote 0 Downvote
Thanks Cian,

You're probably right about the copyright. It's seems, though, that I have seen this on many of e-commerce site. Whether it be changing the color of a T-shirt, kitchen tile, etc.

I checked out the links, but most deal with drop down menus from a navigational perspective. Dynamic Drive is a nice site, some of the image swap scripts are functional, but are a little cheesy design-wise, pixilated fade-ins, etc. What I loved about Nextel, is that the image changes to the user's selection via drop menu. Nothing fancy, very simple in function.

Concerning copyright, I don't necessary want to use their exact code, but I do want something that functions in the same manner. I guess, if I can't find a viable JavaScript alternative, I might just create a small Flash component that achieves a similar end result.

Thanks again,
Dan
 
Upvote 0 Downvote
Upvote 0 Downvote
danielh68,

Here's some code that will do what you want. It pre-loads the images so that there isn't a lag when the image is selected.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<script language='JavaScript' type='text/javascript'>
<!--
[COLOR=green]//Pre-load the images[/color]
if (document.images){
	red = new Image();
	red.src = "images/red.gif";

	blue = new Image();
	blue.src = "images/blue.gif";

	green = new Image();
	green.src = "images/green.gif";

	yellow = new Image();
	yellow.src = "images/yellow.gif";

	black = new Image();
	black.src = "images/black.gif";
}

[COLOR=green]//The magic function[/color]
function ChangeImg(img){
  if (document.images){
  	NewImg = eval(img + ".src");
  	document.all.ColorSquare.src = NewImg;
  }
}
//-->
</script>
<title>Untitled</title>
</head>
<body>
[COLOR=green]<!--The image tag needs to be before the corresponding select control-->[/color]
<img src="images/white.gif" name="ColorSquare">
<br />

<form name="ChooserForm">
	[COLOR=green]<!--The option values correspond with the pre-loaded image names-->[/color]
	<select name="ImageChooser" onchange="ChangeImg(this.value)">
		<option value="red">Red
		<option value="blue">Blue
		<option value="green">Green
		<option value="yellow">Yellow
		<option value="black">Black
	</select>
</form>

</body>
</html>
This should do what you want, and it's free (you just need to modify it for your needs). Hope this helps.

-Ron

We all play from the same deck of cards, it's how we play the hand we are dealt which makes us who we are. -Me

murof siht edisni kcuts m'I - PLEH
 
Upvote 0 Downvote
Thanks...more options, great. I really appreciate everybody's help.

--Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pa2nc
  • Locked
  • Question
WordPress Menu Question
Replies
0
Views
159
pa2nc
pa2nc
ControlNovice
  • Locked
  • Question
Any plans to add AppSheet programming to this list?
Replies
0
Views
197
ControlNovice
ControlNovice
Digital Dose
  • Locked
  • Question
My website refreshes twice when it is opened on any browser. 1
Replies
3
Views
281
sartechy
sartechy
chris900
  • Locked
  • Question
suggest a Magento development company
Replies
0
Views
169
chris900
chris900
bogdangromov
  • Locked
  • Question
Free-royalty music for a vlog
Replies
0
Views
229
bogdangromov
bogdangromov

Part and Inventory Search

Sponsor

Back
Top