473,385 Members | 2,269 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > slider question? how do i display images on range?

Join Bytes to post your question to a community of 473,385 software developers and data experts.

Slider Question? How Do I Display Images on Range?

Hello I'm new to HTML Programming.

Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <body>
  3. <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
  4. <span id="range">0</span>
  5.  
  6. <script type="text/javascript">
  7. function showValue(newValue)
  8. {
  9.     document.getElementById("range").innerHTML=newValue;
  10. }
  11. </script>
  12.  
  13. </body>
  14. </html>
How do I make it display an image when it reaches a certain number on the slider? (i.e. When range==5 it displays image x.jpg)
May 26 '14 #1

✓ answered by Exequiel

Expand|Select|Wrap|Line Numbers
  1. You can try this simple code. :)
  2. <html>
  3. <head>
  4. <script>
  5. function showValue(newValue)
  6. {
  7.         var img = document.getElementById("img_output");
  8.     document.getElementById("range").innerHTML=newValue;
  9.     if(newValue == 5)
  10.     {
  11.         img.innerHTML='<img src="theimg.jpeg">';
  12.     }
  13.     else
  14.     {
  15.         img.innerHTML="";
  16.     }
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. </body>
  22. <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
  23. <span id="range">0</span>
  24. <div id="img_output">
  25. </div>
  26. </html>
  27.  

1 1569
Exequiel
288 256MB
Expand|Select|Wrap|Line Numbers
  1. You can try this simple code. :)
  2. <html>
  3. <head>
  4. <script>
  5. function showValue(newValue)
  6. {
  7.         var img = document.getElementById("img_output");
  8.     document.getElementById("range").innerHTML=newValue;
  9.     if(newValue == 5)
  10.     {
  11.         img.innerHTML='<img src="theimg.jpeg">';
  12.     }
  13.     else
  14.     {
  15.         img.innerHTML="";
  16.     }
  17. }
  18. </script>
  19. </head>
  20. <body>
  21. </body>
  22. <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" />
  23. <span id="range">0</span>
  24. <div id="img_output">
  25. </div>
  26. </html>
  27.  
May 28 '14 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

0
display images from ftp directory.
by: rehan | last post by:
i have iis5. windows 2k advance server. I have many http sites on iis. One ftp site with folders protected with userid and password. e.g i have folders at ftp://www.mysite.com/usa...
ASP / Active Server Pages
3
Display images - C#
by: Dafna m | last post by:
Please HELP 1. How can I display an array of images from diffrent types(jpeg, bmp..)(In C#) Can I also display video files?(In C#) *** Sent via Developersdex http://www.developersdex.com...
C# / C Sharp
1
How can i display images continuously without my interaction?
by: Mamatha | last post by:
Hi I am developing a small application to capture a record a video file through webcam in C#.NET. In this application i created a JPEG images for every slide,means every JPEG image was treated...
C# / C Sharp
2
How to display images dynomically on crystal report?
by: TaeHo Yoo | last post by:
Would anyone be able to tell me how to display images dynomically from the database? I am using dataset which contains supplier name and supplier images. I can display supplier name but supplier...
ASP.NET
5
Display Images vertically via web service
by: Peter Lapic | last post by:
I have to create a image web service that when it receives an imageid parameter it will return a gif image from a file that has been stored on the server. The client will be an asp.net web page...
ASP.NET
5
Is it possible to display images on desktop (not as an icon)?
by: GH | last post by:
Is it possible to display images on the desktop itself, like the bacground but not as a background? And not as icons either. Anything you put in the \Desktop folder shows up as an icon on the...
Visual Basic .NET
2
Display Images in a Combobox
by: Randy | last post by:
Hi, I have a small table - 2 columns, 5 rows. Col 1 is the key column and has integer values of 1 through 5. Column 2 is a varbinary(MAX) column and has jpg images loaded in it. What I want...
Visual Basic .NET
2
VB.NET WEB Display images stored in sql 2005 in datagrid?
by: pozze | last post by:
Hi, I need to display images and other record information retrieved from an SQL 2005 database in a datagrid on a web page. I'm coding in VB .net I have recently changed over from VB ASP and i'm...
.NET Framework
14
anfetienne
upload and display images
by: anfetienne | last post by:
Hi, i went through a tutorial on how to display images stored with a directory and it came out good but i have a problem.....when i upload less than 5 files it displays the 1 image and then shows...
PHP
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
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
0
BarryA
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
0
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
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
jinu1996
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

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!