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>
OLD 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.com/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.
Related
I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>
I'm trying to call a java script function on my mouse over function for an image, however; the debugger says "function isn't defined." I don't understand why I'm getting this error. The java script and tags look to be correct and it seems like I'm using the correct syntax to call the function.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
<script type="text/javascipt">
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif"
document.getElementById(img).src=buttonImg
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif"
document.getElementById(img).src=buttonImg
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif"
document.getElementById(img).src=buttonImg
}
</script>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</body>
</html>
It doesn't work because you spelled "javascript" wrong.
Change this
<script type="text/javascipt">
to
<script type="text/javascript">
or just
<script>
Otherwise it's assumed that the script tag is something other than javascript
And use lowercase for the events, preferably you'd use addEventListener
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</tr>
</table>
</body>
<script>
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif";
document.getElementById(img).src=buttonImg;
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif";
document.getElementById(img).src=buttonImg;
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif";
document.getElementById(img).src=buttonImg;
}
</script>
</html>
I have some images which are hidden, the markup is
<div class="images hide">
<img id="barber" class="barber-image" src="../../Content/images/chosing_business_role/barberShopBackground.jpg" />
<img id="beauty" src="../../Content/images/background_image.png" />
</div>
And i need to change body background with the first one of them when images loaded, but without new request to server for that image. How can i do that? Thanks.
$('#barber').on('load', changeBodyBackground);
// when image loads, call function
....
function changeBodyBackground(e){
$('body').css('background-image', $(this).attr('src'));
// set background-image property for body
}
Try this
<!DOCTYPE html>
<html>
<head>
<script src = "jquery-1.10.2.min.js"></script>
<style>
.hide{display:none;}
</style>
</head>
<body>
<div class="images hide">
<img id="barber" class="barber-image" src="1.jpg" />
<img id="beauty" src="2.jpg" />
</div>
<script type="text/javascript">
$('body').css('background','url('+$('#barber').attr('src')+')');
</script>
</body>
</html>
you can also use background-image
$('body').css('background-image','url('+$('#barber').attr('src')+')');
I'm making an image viewer in HTML5 and I want to write a script tag to the body or head but it won't work. Here is an extract from the main script:
function play() {
document.getElementsByClassName("play")[0].setAttribute("class", "play active");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause");
var body = document.body.innerHTML;
body.innerHTML=body + "<script id='playpause' src='res/playpause.js'></script>";
}
Here is the script I'm trying to write:
var slideshow = setInterval("forward();",5000);
function pause() {
document.getElementsByClassName("play")[0].setAttribute("class", "play");
document.getElementsByClassName("pause")[0].setAttribute("class", "pause active");
window.clearInterval(slideshow);
var playpause = document.getElementById("playpause");
playpause.parentNode.removeChild(playpause);
}
And here is the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Image viewer</title>
<link rel="stylesheet" href="res/style.css" />
<script src="res/script.js"></script>
</head>
<body onload="play()">
<div class="img">
<img title="Hover over me to un-darken" alt="Error displaying image" src="images/1.jpg" id="img" data-number="1" />
</div>
<div title="Backward" class="backward" onclick="backward()"></div>
<div title="Forward" class="forward" onclick="forward()"></div>
<div title="Play" class="play active" onclick="play()"></div>
<div title="Pause" class="pause" onclick="pause()"></div>
<div title="Go to beginning" class="stop" onclick="stop()"></div>
</body>
</html>
Any ideas?
Maybe something like this:
var s = document.createElement('script');
s.setAttribute("type", "text/javascript");
s.setAttribute("src", "res/playpause.js");
var head = document.getElementsByTagName('head')[0];
head.appendChild(s);
I want to modify my slide show to include links via the images in the slide. My original code is and it works:
VAR slides=new Array("s1.jpg","s2.jpg")
var slideCntr=slides.length-1
function slideShow() {
slideCntr+=1
if (slideCntr==slides.length) slideCntr=0
document.getElementById("slideHolder").src = slides[slideCntr]
setTimeout("slideShow()",3000)
}
In my code i have 5 image links with a display of none. I am using an array populated with the id's of the image tags and changing the display to block. I think i need something to change the display back to none. Not sure but what i have now does not work please help. My new code which needs help is:
var slides=new Array("slide1","slide2","slide3","slide4","slide5")
var slideCntr=slides.length-1
function slideShow(){
slideCntr+=1
if (slideCntrl==slides.length)
slideCntr=0
document.getElementById(slideCntr).style="display: block;"
setTimeout("slideShow()",3000)}
<body onLoad="slideShow()">
<div>
<img id="slide1" src="s1.jpg">
<img id="slide2" src="s2.jpg">
<img id="slide3" src="s3.jpg">
<img id="slide4" src="s4.jpg">
<img id="slide5" src="s5.jpg">
</div>
</body>
This code works perfectly fine.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
img
{
display:none;
}
</style>
</head>
<body>
<div>
<img id="slide1" src="1.png">
<img id="slide2" src="2.png">
<img id="slide3" src="3.png">
<img id="slide4" src="4.png">
<img id="slide5" src="5.png">
</div>
<script type="text/javascript">
var slides=new Array("slide1","slide2","slide3","slide4","slide5");
var slideCntr = 1;
setInterval(slideShow,3000);
function slideShow()
{
//alert('called');
for(var i = 1 ; i < slides.length+1 ; i++)
{
document.getElementById("slide"+i).style.display = "none";
}
document.getElementById("slide"+slideCntr).style.display = "block";
slideCntr+=1;
if(slideCntr == slides.length+1)
{
slideCntr = 1;
}
}
</script>
</body>
</html>