Jump to content
Sign in to follow this  
dpuk44

How to change image on Select Drop Down

Recommended Posts

Im trying to change the image on the select drop down box. I have 3 items to display which are stored in my img folder. Is there a simple clean way to do this as all tutorials I have found for this are either poor or really old.

 

<select name="os0" onChange="">
<option value="Black">Black </option>
<option value="Blue">Blue </option>
<option value="Red">Red </option>
</select>

 

 

Share this post


Link to post
Share on other sites

Hi man, sorry yeah. ell it looks like I have managed to get what I want to work except one very minor thing. When you add an item to the cart the item color displays as the img path e,g. img/blktshirt_thumb.png. Is there a way of showing the value as the color of short?

 

				<div id="shop" class="contentbox">
					<img src="img/shop.png" /><br>
					<br>
					<br>
					<div class="itemBox" style="margin: 0px;">
						<div class="item">
							<img id="imageToSwap" src="img/blktshirt_thumb.png">
						</div>
						<div class="paypal">
							<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="H84MYNA3GC7LQ">
							<table>
								<tr>
									<td>
										<input type="hidden" name="on0" value="Colour">Colour
									</td>
								</tr>
								<tr>
									<td>
										<select name="os0" id="colour" onChange="swapImage()">
											<option value="img/blktshirt_thumb.png">Black</option>
											<option value="img/blutshirt_thumb.png">Blue</option>
											<option value="img/redtshirt_thumb.png">Red</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>
										<input type="hidden" name="on1" value="Size">Size
									</td>
								</tr>
								<tr>
									<td>
										<select name="os1">
											<option value="Small">Small</option>
											<option value="Medium">Medium</option>
											<option value="Large">Large</option>
											<option value="X-Large">X-Large</option>
											<option value="XX-Large">XX-Large</option>
										</select>
									</td>
								</tr>
							</table>
							<br>
							<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
							<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
							</form>
						</div>
						<p class="shopFont">Our Pure Warrior T-Shirts are our first designs of the brand available to buy.<br>
						<br>
						With the large Pure Warrior logo printed on the front chest, v-neck and moulded fit material makes this T-Shirt ideal for general use as well as when working out.</p>
					</div>
					<!--					
					<div class="itemBox">
						<div class="item">
							<img id="imageToSwap" src="img/blktshirt_thumb.png">
						</div>
						<div class="paypal">
							<select id="colour" onChange="swapImage()">
								<option value="img/blktshirt_thumb.png">Black</option>
								<option value="img/blutshirt_thumb.png">Blue</option>
								<option value="img/redtshirt_thumb.png">Red</option>
							</select>
						</div>
						<p class="shopFont">
						</p>
					</div>
					-->
				</div>
<script>
function swapImage() {
	var image = document.getElementById("imageToSwap");
	var change = document.getElementById("colour");
	image.src = change.value;
};
</script>

Share this post


Link to post
Share on other sites

Use the HTML5 data-* attribute:

<img id="imageToSwap" src="img/blktshirt_thumb.png">

<select id="colour">
<option value="black" data-src="img/blktshirt_thumb.png">Black</option>
<option value="blue" data-src="img/blutshirt_thumb.png">Blue</option>
<option value="red" data-src="img/redtshirt_thumb.png">Red</option>
</select>
With this jQuery (remember to include jQuery):
$("#colour").on('change', function(){
$("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
});
Edited by andy9l
Messed up the jQuery...should work now.

Share this post


Link to post
Share on other sites

Hi Andy, that looks great, but it doesn't seem to work. Any ideas?

 

<?php
//require ('../includes/connect_db_pw.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>PW</title>
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Include Facebox CSS and script files --> 
<link rel="stylesheet" type="text/css" href="facebox/facebox.css" /> 
<script type="text/javascript" src="facebox/facebox.js"></script> 

<script>
function goto(id, t){	
	//animate to the div id.
	$(".contentbox-wrapper").animate({"left": -($(id).position().left)}, 600);
	
	// remove "active" class from all links inside #nav
    $('#nav a').removeClass('active');
	
	// add active class to the current link
    $(t).addClass('active');	
}
</script>

<script>
$("#colour").on('change', function(){
    $("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
});
</script>

</head>

<body>
	<!-- Header Section -->
	<div id="headerContainer">
		<div id="header"><a href="#" id="logo" onClick="goto('#home', this); return false"><img src="img/logo.png" /></a></div>
	</div>
	<!-- Navigation Section -->
	<div id="nav">
		<div id="navHome"><a class="active" href="#" onClick="goto('#home', this); return false"><img src="img/navHome.png" /></a></div>
		<div id="navShop"><a href="#" onClick="goto('#shop', this); return false"><img src="img/navShop.png" /></a></div>
		<div id="navContact"><a href="#" onClick="goto('#contact', this); return false"><img src="img/navContact.png" /></a></div>
	</div>
	<div id="bar">
	
	</div>
	<div id="contentContainer">
		<div id="content">
			<div class="contentbox-wrapper">
				<div id="home" class="contentbox">
					<img src="img/home.png" /><br>
					<br>
					<br>
					<p class="homeFont">Pure Warrior is a clothing company designed to make a real difference. Originally developed in October 2012 the brand was designed to make a difference in one particular person’s life.<br>
					<br>
					Captain Naima Mohamed, who died of terminal cancer at the age of 27, her formidable courage and strength was the inspiration for the company "Pure Warrior". With Captain Naima gone, the clothing line will continue to thrive just as her memory shall live on.
					
					Now we honour her with the Pure Warrior brand, helping to raise money for cancer research and cancer support foundations through every purchase made.<br>
					<br>
					We thank you for your support.</p>
					<div id="imgWings">
						<img src="img/wings.png" />
					</div>
				</div>
				
				<div id="shop" class="contentbox">
					<img src="img/shop.png" /><br>
					<br>
					<br>
					<div class="itemBox" style="margin: 0px;">
						<div class="item">
							<img id="imageToSwap" src="img/blktshirt_thumb.png">
						</div>
						<div class="paypal">
							<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
							<input type="hidden" name="cmd" value="_s-xclick">
							<input type="hidden" name="hosted_button_id" value="H84MYNA3GC7LQ">
							<table>
								<tr>
									<td>
										<input type="hidden" name="on0" value="Colour">Colour
									</td>
								</tr>
								<tr>
									<td>
										<select name="os0" id="colour" onChange="swapImage()">
											<option value="black" data-src="img/blktshirt_thumb.png">Black</option>
											<option value="blue" data-src="img/blutshirt_thumb.png">Blue</option>
											<option value="red" data-src="img/redtshirt_thumb.png">Red</option>
										</select>
									</td>
								</tr>
								<tr>
									<td>
										<input type="hidden" name="on1" value="Size">Size
									</td>
								</tr>
								<tr>
									<td>
										<select name="os1">
											<option value="Small">Small</option>
											<option value="Medium">Medium</option>
											<option value="Large">Large</option>
											<option value="X-Large">X-Large</option>
											<option value="XX-Large">XX-Large</option>
										</select>
									</td>
								</tr>
							</table>
							<br>
							<input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal — The safer, easier way to pay online.">
							<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
							</form>
						</div>
						<p class="shopFont">Our Pure Warrior T-Shirts are our first designs of the brand available to buy.<br>
						<br>
						With the large Pure Warrior logo printed on the front chest, v-neck and moulded fit material makes this T-Shirt ideal for general use as well as when working out.</p>
					</div>
					<!--					
					<div class="itemBox">
						<div class="item">
							<img id="imageToSwap" src="img/blktshirt_thumb.png">
						</div>
						<div class="paypal">
							<select id="colour" onChange="swapImage()">
								<option value="img/blktshirt_thumb.png">Black</option>
								<option value="img/blutshirt_thumb.png">Blue</option>
								<option value="img/redtshirt_thumb.png">Red</option>
							</select>
						</div>
						<p class="shopFont">
						</p>
					</div>
					-->
				</div>
				
				<div id="contact" class="contentbox">
					<img src="img/contact.png" /><br>
					<br>
					<br>
					<p class="contactFont">Please contact us using the form provided for any questions or queries you may have.<br>
					<br>
					The Pure Warrior team will respond to your question as soon as possible.</p>
					<script>
					$("#contact").bind("submit", function() {

					$.ajax({
					type        : "POST",
					cache       : false,
					url         : "/form_action_handler.php",
					data        : $(this).serializeArray(),
					success: function(data) {
					$.fancybox(data);
					}
					});
					return false;
					});
					</script>

					<form action="includes/form_action_handler.php" method="POST" id="contact">
						<label>Name:</label>
							<input type="text" id="name" name="name">
						<label>Email Address:</label>
							<input type="text" id="mail" name="mail">
						<label>Comments:</label>
							<textarea rows="5" cols="20" id="comment" name="comment"></textarea>
						<input type="image" class="submit" name="submit" src="img/formSend.png" />
					</form>
					<a href="img/t-shirt.png" rel="facebox">View Test Image</a>
				</div>
			</div>
		</div>
	</div>
	<div id="footerContainer">
		<div id="footer">
			<div class="socialMedia">
				<a href="http://www.facebook.com/pages/Pure-Warrior-Co/457497380956356?fref=ts" target="_blank"><img src="img/facebook.png" /></a>
			</div>
			<div class="socialMedia">
				<a href="http://twitter.com/PureWarriorCo" target="_blank"><img src="img/twitter.png" /></a>
			</div>
			<div id="secondaryLinks">
				<p><a href="#home" class="footerText" onClick="goto('#home', this); return false">Home</a> | <a href="#shop" class="footerText" onClick="goto('#shop', this); return false">Shop</a> | <a href="#contact" class="footerText" onClick="goto('#contact', this); return false">Contact</a></p>
				<p class="footerText"><a href="http://www.nurdit.com" target="_blank">© nurdIT 2012</a></p>
			</div>
		</div>
	</div>
</body>

</html>

Share this post


Link to post
Share on other sites

You need to wait for the document to load before attaching events via jQuery:

$(function(){
  $("#colour").on('change', function(){
    $("#imageToSwap").attr("src", $(this).find(":selected").attr("data-src"));
  });
});

Your select is still using onchange="swapImage" - you need to delete that:

<select name="os0" id="colour">
<option value="img/blktshirt_thumb.png">Black</option>
<option value="img/blutshirt_thumb.png">Blue</option>
<option value="img/redtshirt_thumb.png">Red</option>
</select>

Also, you're using .bind in there...you should really change that to jQuery.on().

 

In fact, the HTML is quite messy - inline JavaScript, <br> tags for layout? It needs cleaning up, a lot.

Edited by andy9l
[code] tag bug

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      59,313
    • Most Online
      4,970

    Newest Member
    conorrsl85
    Joined
  • Forum Statistics

    • Total Topics
      65,997
    • Total Posts
      454,483
×