I have three buttons, in which their images are hidden. Suppose that I press the button "Square", the square image will popup. When I press the "Circle" button, only the circle image will popup and the square image will be hidden and vice versa. However for my code when I click the button, it will just pop up to the top of the page without displaying the image.
function showImage() {
var image = document.getElementById('sqimg').style.visibility = "visible";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility = "visible";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility = "visible";
}
<html>
<body>
<div>
<form>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle
</button>
</form>
<form>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
</form>
</div>
</body>
</html>
Instead of three separate functions create a single function. In that single function pass the id of the image that you want to show as an argument.
Also use css class instead of inline style.So in the function check if if there exist an element with class show. If it exist then remove the class show from it
default button type is submit so add button type as button else it will be able to submit the form
function showImage(elem) {
if (document.getElementsByClassName('show')[0] !== undefined) {
document.getElementsByClassName('show')[0].classList.remove('show');
}
var image = document.getElementById(elem).classList.add('show');
}
.hidden {
visibility: hidden;
}
.show {
visibility: visible;
}
<div>
<form>
<button type='button' onclick="showImage('sqimg')" name="square" value="Square">Square</button>  
<button type='button' onclick="showImage('cirimg')" name="Circle" value="Circle">Circle</button>  
<button type='button' onclick="showImage('trimg')" name="Triangle" value="Triangle">Triangle </button>
</form>
</div>
<form>
<img src="square.png" id="sqimg" class='hidden' width="100" height="100">
<img src="circle.png" id="cirimg" class='hidden' width="100" height="100">
<img src="triangle.png" id="trimg" class='hidden' width="100" height="100">
</form>
That is because of form tag for button controls as you are handling click event for each button so no need to use form,
Try below code:
function showImage() {
var image = document.getElementById('sqimg').style.visibility="visible";
document.getElementById('cirimg').style.visibility="hidden";
document.getElementById('trimg').style.visibility="hidden";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility="visible";
document.getElementById('trimg').style.visibility="hidden";
document.getElementById('sqimg').style.visibility="hidden";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility="visible";
document.getElementById('cirimg').style.visibility="hidden";
document.getElementById('sqimg').style.visibility="hidden";
}
<html>
<body>
<div>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle
</button>
</div>
<form>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100">
</form>
</html>
Everytime you click one of your buttons your page is refreshing, thus making it seem as if your buttons are not working. This is happening because your buttons are within a <form> and so your form is submitting (hence refreshing) the page each time a button is clicked. If you remove <form></form> tags your page will not refresh and thus fix your issue.
See working example below:
<html>
<script>
function showImage() {
var image = document.getElementById('sqimg').style.visibility = "visible";
}
function showImage2() {
var image = document.getElementById('cirimg').style.visibility = "visible";
}
function showImage3() {
var image = document.getElementById('trimg').style.visibility = "visible";
}
</script>
<body>
<div>
<button onclick="showImage()" name="square" value="Square">Square</button>  
<button onclick="showImage2()" name="Circle" value="Circle">Circle</button>  
<button onclick="showImage3()" name="Triangle" value="Triangle">Triangle </button>
</div>
<img src="square.png" id="sqimg" style="visibility:hidden" width="100" height="100" alt="square">
<img src="circle.png" id="cirimg" style="visibility:hidden" width="100" height="100" alt="circle">
<img src="triangle.png" id="trimg" style="visibility:hidden" width="100" height="100" alt="triangle">
</body>
</html>
Related
Hi I am new to this and still learning haha so go easy on me.
I am trying to make a simple recognizing game using map symbols as the images.
I have got the start button when clicked will ask you a question but cannot seem to get a random picture to appear as well. I also what the grey stars to light up every time the user selects the right button/symbol.
Here is the code:
<!DOCTYPE html>
<style>
body{ background-color: lightblue; }
</style>
<html>
<head>
<title>OS Map Symbols</title>
<meta charset="utf-8" />
</head>
<body>
<p> <input onclick="btnStart(); displayRandomImage();" type="button" value="Start" /> </p>
<input id="btnTrain" type="button" value="Train Station" disabled="disabled"/>
<input id="btnBus" type="button" value="Bus Station" disabled="disabled"/>
<input id="btnYouth" type="button" value="Youth Hostel" disabled="disabled"/>
<input id="btnFootpath" type="button" value="FootPath" disabled="disabled"/>
<input id="btnBridle" type="button" value="Bridleway" disabled="disabled"/>
<input id="btnWorship" type="button" value="Place of Worship" disabled="disabled"/>
<input id="btnHouse" type="button" value="Public House" disabled="disabled"/>
<input id="btnCar" type="button" value="Car Park" disabled="disabled"/>
<input id="btnRoad" type="button" value="Road" disabled="disabled"/>
<input id="btnPillar" type="button" value="Triangulation Pillar" disabled="disabled"/>
<center> <p> <p id="paragrapgh"> </p> </center>
<center> <div class="contents" id="content"></div> </center>
<img id="imgTrain.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBus.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg" width="100" height="100" style="display:none;"/>
<img id="imgYouth.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgFootpath.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgBridle.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgWorship.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg" width="100" height="100" style="display:none;"/>
<img id="imgHouse.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg" width="100" height="100" style="display:none;"/>
<img id="imgCar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg" width="100" height="100" style="display:none;"/>
<img id="imgRoad.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg" width="100" height="100" style="display:none;"/>
<img id="imgPillar.jpg" img src="C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg" width="100" height="100" style="display:none;"/>
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar1" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar2" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar3" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar4" />
<img src="C:\Users\ekene\OneDrive\Pictures\star-g.gif" img id="imgStar5" />
</body>
</html>
<script>
function btnStart() {
var x = document.getElementById("paragrapgh");
x.style.fontSize = "25px";
x.style.color = "red";
document.getElementById("paragrapgh").innerHTML = "What Is This Symbol?";
}
function displayRandomImage(){
var Images1 = new Array();
Images1[0]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TS.jpg"
Images1[1]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BS.jpg"
Images1[2]= "C:\Users\ekene\OneDrive\Pictures\MapSym_YH.jpg"
Images1[3]= "C:\Users\ekene\OneDrive\Pictures\MapSym_BW.jpg"
Images1[4]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PH.jpg"
Images1[5]= "C:\Users\ekene\OneDrive\Pictures\MapSym_RD.jpg"
Images1[6]= "C:\Users\ekene\OneDrive\Pictures\MapSym_FP.jpg"
Images1[7]= "C:\Users\ekene\OneDrive\Pictures\MapSym_PW.jpg"
Images1[8]= "C:\Users\ekene\OneDrive\Pictures\MapSym_CP.jpg"
Images1[9]= "C:\Users\ekene\OneDrive\Pictures\MapSym_TP.jpg"
var random = Images1[Math.floor(Math.random() * Images1.length)];
document.getElementById("content").innerHTML = random;
}
</script>
You were very close. The issue you're encountering can be solved using the addEventListener method of connecting events to elements. In this case, adding an id to your start button and firing the events when clicked would look like this
JSFIDDLE
HTML
<input id="startButton" type="button" value="Start" />
JS
var startButton = document.getElementById('startButton');
startButton.addEventListener('click', function(){
btnStart();
displayRandomImage();
});
It's worth mentioning you have a number of HTML syntax issues including unclosed tags, style and script tags outside of the html element, using . in id attributes, and using deprecated tags like center.
Unfortunately, because you have locally linked images, im not sure if you're asking how to make the gif items animate again (Can you control GIF animation with Javascript?) or if you're asking about swapping image src using js (Programmatically change the src of an img tag)
From a coding perspective, the way you're going about trying to link up images to the buttons could be made far simpler for yourself by starting with a JS object, and generating items from there, especially as you have a consistent path to images. Something like this: JSFIDDLE
`
<html>
<head>
<body>
<div>
<img src="p1.jpg" alt="a" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" >
<img src="p2.jpg" alt="b" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" >
<img src="p3.jpg" alt="c" align="center" width="200" height="300" onClick="InsertPictureToMySql(event);" >
</div>
<br>
<script>
function InsertPictureToMysql(evt) {
//event.target is where you get dom element of your picture
var target = event.target;
//you can then get e.g. event.target.src to get path to the picture...
//here you can do your saving/uploading logic...
<%# page import="java.sql.*"%>
<%# page import="java.io.*"%>
<%
Connection con=null;
ResultSet rs=null;
PreparedStatement psmt=null;
FileInputStream fis;
String url="jdbc:mysql://192.168.10.13:3306/test";
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
con=DriverManager.getConnection(url,"root","root");
File image = window.getSelection(Image.valueOf(Image));
psmt=con.prepareStatement("insert into inimage(name,city,image)"+"values(?,?,?)");
psmt.setString(1,"Barack Obama");
psmt.setString(2,"Wasington D.C.");
fis=new FileInputStream(image);
psmt.setBinaryStream(3, (InputStream)fis, (int)(image.length()));
int s = psmt.executeUpdate();
if(s>0) {
%>
<b><font color="Blue">
<% out.println("Image Uploaded successfully !"); %>
</font></b>
<%
}
else {
out.println("unsucessfull to upload image.");
}
con.close();
psmt.close();
}catch(Exception ex){
out.println("Error in connection : "+ex);
}
%>
}
</body>
</head>
</html>
`i am trying the same for so many days but i can't select an individual image in and my aim is to select an individual image from div tag an give a function that when onclick it should store in mysql database.so please help me to do this its my project
<div align="center">
<onClick="return.InsertPictureToMySql();" ><img src="images/p1.jpg" alt="a" align="center" width="200" height="300">
<onClick="return.InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300">
</div><br>
<div align="center">
<onClick="return java.InsertPictureToMySql();"><img src="images/p1.jpg" alt="a" align="center" width="200" height="300">
<a target="_blank" href="images/p4.jpg"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300">
<br>
</div>
<div align="center">
<onClick="return InsertPictureToMySql();"><img src="images/p1.jpg" alt="a" align="center" width="200" height="300">
<onClick="return InsertPictureToMySql();"><img src="images/p2.jpg" alt="b" align="center" width="200" height="300">
</div><br>
</br>
onClick is not html element. It is an ATTRIBUTE of html element.
So this is how your html code should look like:
<div align="center">
<img src="images/p1.jpg" alt="a" align="center" width="200" height="300" onclick="insertPictureToMysql(event);">
<img src="images/p2.jpg" alt="b" align="center" width="200" height="300" onclick="insertPictureToMysql(event);">
</div>
And of course your JS function:
<script>
function insertPictureToMysql(evt) {
//event.target is where you get dom element of your picture
var target = event.target;
//you can then get e.g. event.target.src to get path to the picture...
//here you can do your saving/uploading logic...
}
</script>
This might help:
// Here, I take the last image, but you might want to take any. Then, bind the
// click event to it
$('img').last()
.bind('click',function() {
alert('clicked');
// run the function to store it in the db.
})
This question already has answers here:
Changing the order of elements
(4 answers)
Closed 8 years ago.
Help me to solve this trivial problem.
I need to change an image order within button_Click. How can I do this?
Actualy I need the **simplest** way, **no jQuery**.
Will be very grateful for piece of working code with explanation - It's a headache for me
[Here][1] is my code
PS I already got some advises, but all them conneted to jQuery
No jQuery
<div id="one">
<input id="b1" value="Change the image order" onclick="change_order()" type="button"/>
<h1 style="font-size: 12"> Header HeaderHeaderHeader</h1>
<p style="font-size:8"> text text text </p>
</div>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
Hope you find the below code working as per your requirement.
<!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Click me</button><br/>
<br/>
<img height="50" width="50" id="demo1" src="http://www.largeyellowbutton.com/largeyellowbutton.jpg"></img>
<br/>
<img height="50" width="50" id="demo2" src= "http://libn.com/wp-files/graphics/register-button_0.jpg"></img>
<br/>
<img height="50" width="50" id="demo3" src= "http://mygimptutorial.com/images/button-with-reflection/11.jpg"></img>
<script>
function myFunction() {
var temp=document.getElementById("demo1").src;
document.getElementById("demo1").src = document.getElementById("demo2").src;
document.getElementById("demo2").src = document.getElementById("demo3").src;
document.getElementById("demo3").src = temp;
}
</script>
</body>
</html>
Use the code which I have posted above in case you know the number of image inside your div. If your unsure about the number of images your going to add then use the below code.
<html>
<head>
<script>
function myFunction() {
var count=document.getElementById("picContainer").getElementsByTagName("img").length;
//below code captures the first image source before
//changing the image order. This is also used to assign as source to the
// last image tag.
var temp=document.getElementById("pict_01").src;
var i;
for(i=1;i<=count;i++)
{
//If value of i is equal to count then, assign the first image source
// captured in temp variable to the last image inside the div.
if(i==count){
document.getElementById("pict_0"+i).src=temp;
}
//below code assigns image in decreasing order.
document.getElementById("pict_0"+i).src = document.getElementById("pict_0"+(i+1)).src;
}
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value=" Change an image order"></input>
<br/>
<div id="picContainer">
<img id="pict_01" src="http://heaversfarm.files.wordpress.com/2013/01/i-love-maths.jpg" />
<img id="pict_02" src="http://www.uplandsoutreach.org/wp-content/uploads/2013/04/20maths1.jpg" />
<img id="pict_03" src="http://www.milldamschool.ik.org/img/d666f5fc-db14-11de-a689-0014220c8f46-5812526.jpg" />
<img id="pict_04" src="http://www.birdsontheblog.co.uk/wp-content/uploads/2010/05/maths.jpg" />
</div>
</body>
</html>
I have a div that contains 1 to many images with next and previous image buttons. When a user clicks the next/previous button the current image style is changed from display:block to display:none using jquery. I need to get the ID attribute from the current image that is showing ie. has the display:block style applied.
<div id="propPhotos" name="propPhotos">
<div id="propPhotsDivList">
<div id="imageNameId0" style="display:block">
<img src="/PropertyImages/1/171fc210b4584f41936a078c4176c7e0.jpg" height="200" width="200" id="3"/>
</div>
<div id="imageNameId1" style="display:none">
<img src="/PropertyImages/1/114810f0067749eda8049d2f8269dd00.jpg" height="200" width="200" id="4"/>
</div>
<div id="imageNameId2" style="display:none">
<img src="/PropertyImages/1/8.jpg" height="200" width="200" id="15"/>
</div>
<div id="imageNameId3" style="display:none">
<img src="/PropertyImages/1/e8f182ab645549b399cebc67ed996d151.jpg" height="200" width="200" id="25"/>
</div>
</div>
<div>
<div class="row">
<input type="button" id="NextImage" value="Next Image" onclick="ImageNext()" /><input type="button" id="PrevImage" value="Previous Image" onclick=" ImagePrev()" />
</div>
<div class="row">
<button type="button" class="AddImage">Add Image</button><button type="button" class="RemoveImage">Remove This Image</button>
</div>
</div>
This is the path I am currently on which is in the next and previous image click handlers.
CurrentImageId = document.getElementById("imageNameId" + id).children('img').attr('id');
So when the user clicks either button its supposed to assign the id value to the CurrentImageId. This does not work for one and does not help on the initial load when neither next or previous image buttons have been clicked.
Well, there are a few different ways as far as the initial load is concerned. Here are a couple of examples:
Using the :visible selector:
var currentImageId = $('#propPhotsDivList > div:visible > img').prop('id');
Or perhaps combined with filter():
var currentImageId = $('#propPhotsDivList img').filter(function(){
return $(this).parent('div').is(':visible');
}).prop('id');
If the divs are hidden and shown correclty using your click handlers, you can use the same functionality inside them as well.
$('#propPhotsDivList').children('div:not(:hidden)').attr('id');
I have an image and a button, like this:
<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton" onclick=playVideo()></button>
</div>
And i want to replace that image and button with a video.
I dont want the video to appear until i press the button play. How can i do that?
Thanks
<!DOCTYPE HTML>
<html>
<head>
<title>Hide Image button and show video</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#playButton').click( function () {
$('#center').hide();
$('#video-player-div').show();
});
});
</script>
</head>
<body>
<div id="center">
<img src="Images/img_menu/BOU.png" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" width="60" height="60" id="playButton"/>
</div>
<div id="video-player-div" style="display:none;">Your video goes here</div>
</body>
</html>
var btn = document.getElementById('playButton');
var img = document.getElementById('img');
function playVideo()
{
img.style.display = 'none';
video.style.display = 'block';
}
btn.addEventListener('click', playVideo, false);
I think i found the solution:
HTML:
<div id="centerside">
<img src="Images/img_menu/BOU.png" id="img" width="100" height="100">
</br>
<input type="image" src="Images/img_menu/play_btn.png" id="btn" width="60" height="60" id="playButton" onclick=playVideo()></input>
<div id="showVideoDiv" style="display:none;">
<video id="myMovie" width="600" height="480">
<source src="Images/vid_menu/GOT_S4_E3.mp4">
</video>
</div>
</div>
JAVASCRIPT
function doFirst(){
var btn = document.getElementById('playButton');
var img = document.getElementById('img');
var showVideoDiv = document.getElementById('showVideoDiv');
var myMovie = document.getElementById('myMovie');
var centerside = document.getElementById("centerside");
btn.addEventListener('click', playVideo, false);
}
function playVideo(){
img.style.display = 'none';
btn.style.display = 'none';
showVideoDiv.style.display = 'block';
myMovie.play();
centerside.style.paddingTop="0px";
}
window.addEventListener('load',doFirst,false);