Call on image id using jquery

Hi,
Below is a working model that changes the image with a dropdown menu.

How would I change the image without the url being the value? Id like to have the value="yellow" and maybe id="image3.jpg". How would that work?

Thanks in advance.

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

"http://www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>JQuery Image</title> 

<script type="text/javascript" src="/script/jquery-1.3.1.min.js"></script>

<script type="text/javascript"> 

 $(document).ready(function() { 

   $("#image").change(function() { 

     $("#imagePreview").empty(); 

     if ( $("#image").val()!="" ){ 

        $("#imagePreview").append("<img src=\"" + $("#image").val()  + "\" />"); 

     } 

     else{ 

        $("#imagePreview").append("displays image here"); 

     } 

   }); 

 }); 

</script> 

</head> 

<body> 

<select name="image" id="image" class="inputbox" size="1"> 

   <option value=""> - Select Image - </option> 

   <option value="image1.jpg">Blue</option> 

   <option value="image2.jpg">Red</option> 

   <option value="image3.jpg" selected>Yellow</option> 

</select> 
 
<div id="imagePreview"> 

   displays image here 

</div>

</body> 

</html>

Feb 12 '12 #1

Subscribe Post Reply

2480

acoder

16,027

Expert Mod 8TB

Simply .id should do the trick.

Feb 27 '12 #2

Similar topics

Display an image using an expression?

by: bborden | last post by:

Novice Access programmer here. I would like to display an image using the Toolbox Image object by calling the images file name using: =fPictureFiles(!!,1) in the Picture control. Below...

Microsoft Access / VBA

How to upload a image using ajax

by: Senthil | last post by:

Hi all I'm new in ajax. How to upload a image using ajax..

Javascript

Printing an Image using GDI

by: user | last post by:

Hi all... i am trying to print an image using GDI - but the only thing i get is a black rectangle. Does anybody know what is wrong, or how else to get the bitmap on the printer (GDI+ is not...

C# / C Sharp

Anyone using JQuery witth ASP.net?

by: darrel | last post by:

I'm still struggling to find a javascript/ajax library that I want to stick with for a while. JQuery is looking great these days...refined, LOTS of plug-ins, and an active community. Is...

ASP.NET

How to update tab content using jQuery

by: rizwan6feb | last post by:

Hi I have created a tabbed interface using jQuery using the code below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

Javascript

Popup aspx page using jquery

by: pavanip | last post by:

Hi, I want to popup aspx page using jquery. I have written the following code <a href="Contactus.aspx?TB_iframe=true&height=250&width=200" class="thickbox" >AboutUs</a> I have called...

Javascript

loading image while jquery is loading

by: aaronkmar | last post by:

Trying to get a loading image to spin while the query is loading. I can get the data div to fade in, but I can't seem to figure out how to get the gif while the query is loading. I'm using two...

Javascript

jquery pagination problem

by: pradeepjain | last post by:

<html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="jquery.rating.js" type="text/javascript" language="javascript"></script> <link...

Javascript

How to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery?

by: rhtdmrai | last post by:

I want to apply autocomplete in gridview (in asp.net3.5 with C#) using jquery and this gridview is within the ajax update panel <asp:UpdatePanel ID="UpdatePanel1" runat="server"> ...

.NET Framework

How do reload the page using jQuery?

by: apssiva | last post by:

Hello All, 1. First i select the class name in combo box -> using jQuery reload the page. 2. after reload the page, Student name was display in random. so i add two radio button. 1....

Javascript

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA