I want to pass a variable which holds an img src to another page using javascript onClick() function. How can I do it either by id or by name tag. Here's What I'm looking for:
Get the img src variable by onclick() from home.html & pass to & document.write() to img.html using a location.href = '/image'; in my function()
Thanks in advance.
function
<script type="text/javascript">
function img(id)
{
this.id = id;
var i = document.getElementById("image").src;
var j = new Image();
j.src = i;
document.body.appendChild(j);
document.write('"<img src="' + j + '"' + '/>');
}
</script>
home.html
<div class="container">
<ul class="thumbnails">
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="abc" name="a">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="xyz" name="b">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="zzz" name="c">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
</ul>
</div>
The Page I want to pass the img src value to is
img.html
<div class="container">
<div id="image" name="image">
<img src="" id="image" name="image"/>
</div>
</div>
I want to pass a variable which holds an img src to another page using javascript onClick() function. How can I do it either by id or by name tag. Here's What I'm looking for:
Get the img src variable by onclick() from home.html & pass to & document.write() to img.html using a location.href = '/image'; in my function()
Thanks in advance.
function
<script type="text/javascript">
function img(id)
{
this.id = id;
var i = document.getElementById("image").src;
var j = new Image();
j.src = i;
document.body.appendChild(j);
document.write('"<img src="' + j + '"' + '/>');
}
</script>
home.html
<div class="container">
<ul class="thumbnails">
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="abc" name="a">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="xyz" name="b">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="zzz" name="c">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
</ul>
</div>
The Page I want to pass the img src value to is
img.html
<div class="container">
<div id="image" name="image">
<img src="" id="image" name="image"/>
</div>
</div>
- 2 Use a hidden input field? – Sasanka Panguluri Commented Aug 21, 2013 at 18:43
- 2 You can not have duplicate id's. And you can not have an id that starts with a Number. – putvande Commented Aug 21, 2013 at 18:44
- What is it that you are trying to do here? Do you want to open img.html with the clicked image, or are you just sending it to the html page and aiming to use the response for something? – StoicJester Commented Aug 21, 2013 at 18:51
- Why do you have that document.write there? You're already adding the image to the body.. – Benjamin Gruenbaum Commented Aug 21, 2013 at 18:54
- 2 Then start with the basics, read the MDN (Mozilla Developer Network) introduction to JS tutorial (it's free!) or Eloquent JavaScript (another free book!) codecademy. also have free tutorials. Your ments indicate you lack the basic understanding to actually solve the problem at hand. Coding this way is painful and unrewarding - JS is a great language and you can enjoy it - don't put yourself in this position. – Benjamin Gruenbaum Commented Aug 21, 2013 at 19:07
3 Answers
Reset to default 5OLD school way
i don't know exactly but i think this is also supported by the ie6;
i only added the necessary code
home.html
<html>
<head>
<title>thumbs</title>
<script>
function sendimg(a){
window.location.href='b.html#id='+a.id+'&src='+a.src;
}
</script>
</head>
<body>
<img src="imgs/img1.jpg" id="img1" onClick="sendimg(this);">
<img src="imgs/img2.jpg" id="img2" onClick="sendimg(this);">
<img src="imgs/img3.jpg" id="img3" onClick="sendimg(this);">
</body>
</html>
img.html
<html>
<head>
<title>img</title>
<script>
function getimg(){
var a=window.location.href.split('#')[1].split('&'),
id=a[0].split('=')[1],
src=a[1].split('=')[1],
img=document.images[0];
img.id=id;
img.src=src;
}
</script>
</head>
<body onLoad="getimg()">
<img src="ablankimage.gif">
</body>
</html>
now give me some seconds and i write the modern way.
Modern way
.. so this example has less support but can do alot more. i also wrote some similar things in a different way and added some special modern features you can look after as you said your new to javascript.
home.html
<html>
<head>
<title>thumbs</title>
<script>
(function(W){
function init(){
W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
}
function sendimg(e){
var a=e.target;
if(a.parentNode.id=='thumbs'){
W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
W.location.href="img.html";
}
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>
img.html
<html>
<head>
<title>img</title>
<script>
window.onload=function(){
var img=document.createElement('img');
var info=JSON.parse(window.localStorage['imginfo']);
delete window.localStorage['imginfo'];
img.src=info.src;
img.id=info.id;
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
if you wan't me to explain something morejust ask ;)
there can be a way to make this Morden way to walk on all images which are in one table of the database?i used to try that but it's used only on the first image.then i tried to put that morden way in php pages.
here's my php pages:
*home.php:
<?php
$bdd = new PDO('mysql:host=127.0.0.1;dbname=imagetest', 'root', '');
?>
<html>
<head>
<title>thumbs</title>
</head>
<body>
<div >
<?php
$req = $bdd->query("SELECT * FROM images ORDER BY idimage DESC ");
while ($donnees = $req->fetch()):
?>
<div id="thumbs"><?php echo ('<img style="width:180px;height:180px;margin-left:40%;" src = "'.$donnees['lien'].'">');?> </div>
<script>
(function(W){
function init(){
W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
}
function sendimg(e){
var a=e.target;
if(a.parentNode.id=='thumbs'){
W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
W.location.href="img.php";
}
}
W.addEventListener('load',init,false)
})(window)
</script>
<?php endwhile; ?>
</div>
<body>
</body>
</html>
*img.php
<!DOCTYPE html>
<html>
<head>
<title>img</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width-device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css"/>
<link rel="stylesheet" type="text/css" href="https//fonts.googleapis./css?family=Roboto" rel="stylesheet"/>
<style type="text/css">
img{height: 300px;width: 400px;}
</style>
<script>
window.onload=function(){
var img=document.createElement('img');
var info=JSON.parse(window.localStorage['imginfo']);
delete window.localStorage['imginfo'];
img.src=info.src;
img.id=info.id;
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>This would easily be done with Ajax + PHP + jQuery
JQUERY
var link = $("img").attr("src");
$.ajax{
url: "img.php",
type: "POST",
data: {"img":link},
success: function(e){
// Whatever you want
}
}
PHP
<?php
if (isset($_POST['img'])){
$link = $_POST['img']
}
// Whatever you want to do with the variable $link
?>
I don't know if this is going to solve your problem, hope it does.