/    Sign up×
Community /Pin to ProfileBookmark

JavaScript display the image i choose

Copy linkTweet thisAlerts:
May 05.2016

Please help me with HTML and JavaScript. I want to make a webpage with a text box and submit button. When i put an image number from 1 to 100 and press submit button to show below a that image that correspond with that number.

Example:
[url]http://s32.postimg.org/jpiq376bn/image.png[/url]

This code is with dropdown but i want to edit it with submit button like in image

[CODE]<!DOCTYPE html>
<html>
<script language=”javascript”>

function linkrotate(which){
var mylinks=new Array()

mylinks[0]=”1.jpg”
mylinks[1]=”2.jpg”
mylinks[2]=”3.jpg”

window.location=mylinks[which]
}

function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
</script>

<body>

<table border=”0″ cellspacing=”0″ cellpadding=”0″><tr>
<td width=”100%”><form name=”mygallery”>
<form><p><select name=”picture” size=”1″ onChange=”showimage()”>
<option selected value=”1.jpg”>1</option>
<option value=”2.jpg”>2</option>
<option value=”3.jpg”>3</option>
</select></p></form></td></tr>
<tr><td width=”100%”><p align=”center”>
<a href=”javascript:linkrotate(document.mygallery.picture.selectedIndex)” onMouseover=”window.status=”;return true”>
<img src=”1.jpg” name=”pictures” width=”100″ height=”100″ border=0></a></td></tr></table>

</body>
</html> [/CODE]

to post a comment
JavaScript

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumMay 05.2016 — That's quite easy:
[CODE] <input id="myinput"><label>Input a number</label><br>
<button onclick="linkrotate(this);">Submit</button>
<script>
function linkrotate(which) {
var nr = document.getElementById("myinput").value;
window.location = nr + ".jpg";
}
</script>[/CODE]
Copy linkTweet thisAlerts:
@Kevin2May 05.2016 — Another option:
[code=html]<input type="number" min="1" max="100" value="1" id="selNum"> <button onclick="getPic(selNum.value,display)">Submit</button>
<div id="display"></div>

<script>
function getPic(picNum,d) {
d.innerHTML = '<img src="' + picNum + '.jpg" alt="Picture number ' + picNum +'">';
}
getPic(1,display); // displays 1.jpg on page load
</script>[/code]
Copy linkTweet thisAlerts:
@alex05okauthorMay 05.2016 — Thank you Kevin2 , you are the best.

I have one more question. How to activate "Submit" button also when Enter is pressed, not only on click?

Thank you again!!!
Copy linkTweet thisAlerts:
@Kevin2May 05.2016 — [code=html]<input type="number" min="1" max="100" value="1" id="selNum" onkeyup="keyboard(this.value,display)"> <button onclick="getPic(selNum.value,display)">Submit</button>
<div id="display"></div>

<script>
function getPic(picNum,d) {
d.innerHTML = '<img src="' + picNum + '.jpg" alt="Picture number ' + picNum +'">';
}
function keyboard(picNum,d) { // detect if key is 'Enter' and fire getPic() if true
if (event.keyCode == 13) {
getPic(picNum,d);
}
}
getPic(1,display);
</script>
[/code]
Copy linkTweet thisAlerts:
@rootMay 06.2016 — using whats there, IDK why you need an array with the same information thats in the select, if you are selecting an image then going to it as a link, then you modify the script to go there or make the image click able by adding an onclick property to the image setting that uses the same information you have used to set the image.
[code=html]<!DOCTYPE html>
<html>
<script language="javascript">

function showimage( fm ){
if (!document.images) return
ind = fm.picture.selectedIndex;
sel = fm.picture.options[ind].value;
document.images.pictures.src = "./img/"+sel;
document.anchors.pictures.href = "./img/"+sel;
}
</script>

<body>

<table border="0" cellspacing="0" cellpadding="0"><tr>
<td width="100%">
<form name="imgopt">
<p>
<select name="picture" size="1" onchange="showimage(document.forms.imgopt);">
<option selected value="1.jpg">1</option>
<option value="2.jpg">2</option>
<option value="3.jpg">3</option>
</select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%">
<p align="center">
<a name="pictures" href="./img/1.jpg">
<img src="./img/1.jpg" name="pictures" id="pictures" width="100" height="100" border=0>
</a>
</td>
</tr>
</table>

</body>
</html>[/code]
×

Success!

Help @alex05ok spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...