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')+')');
Related
I am trying to make a button which when held down should change the picture next to it and then when you are not holding down on the button it will be on the original image. Now it comes up with the button and the image and knows that the picture of the button is a button but doesn't change the image.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
var button=document.images["button"];
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg";
return true;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="return handleMDown()" onmouseup="return handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="return handleMDown()"
onmouseup="return handleMUp"></a>
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
So here's the thing:
First of all, as mentioned by Petr Felzmann
syntax error: missing variable name: var =document.images["goo.gl/jjOUxT"]
Second of all, in your onmousedown & onmouseup events you can call the function by going handleMDown(); or handleMUp(); instead of your return handleMDown().
Last but not least, I've changed the images around a bit, this is just so I could test it properly, but from what I understood this is what you basically wanted:
HTML
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="handleMDown();" onmouseup="handleMUp();">
<!-- Changed the onmousedown & onmouseup to handleMDown(); or handleMUp(); accordingly -->
<img id="button" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown();" onmouseup="handleMUp();"></a>
<!-- Changed the onmousedown & onmouseup to handelMDown(); or handleMUp(); accordingly -->
<img id="imagechange" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height=" 220" alt="image">
</body>
Javascript
function handleMDown() {
document.getElementById("imagechange").src="http://www.veryst.com/_Images/Material%20Testing%20--%20Modeling%20Services/Small%20punch%201.png";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" ;
return true;
}
Don't forget to change the images back in the Javascript as well as in the HTML
Hope this helps!
you should put script tag in before close body tag :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Click in button</h1>
<a href="#" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp">
</a>
<img id="imagechange" src="green.jpg" width="220" height=" 220" alt="image">
<script>
var button= document.images["button"];
var e =document.images["http://goo.gl/jjOUxT"]
function handleMDown()
{document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
return true;
}
</script>
</body>
</html>
You tried too much, you can do it much simpler. I stripped it down to the bare minimum: changing the images on the right of the big red button. I stripped the link, too, just add it back if you need it.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="handleMDown()"
onmouseup="handleMUp()">
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
The event-handler (the onthingy attributes if you excuse my simplifying) do not make use of any return of the functions they call, they just call them. If you want to call functions (function fun(){...}) you need to add () at the end of the function name, you forgot that in one places.
you can use onmousedown and onmouseup to handle these events
document.getElementById('red').onmousedown = function () {
document.getElementById('red').style.backgroundColor = 'red';
};
document.getElementById('red').onmouseup = function () {
document.getElementById('red').style.backgroundColor = 'blue';
};
http://jsfiddle.net/kdyr8owk/
Change your HTML code to:
<img id="button" src="http://goo.gl/VqDdz0" style="width: 220px; height: 220px; border: 0;" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="imagechange" src="put your NOT holding button down source here" alt="image" style="width: 220px; height: 220px;">
Note that I changed your HTML code to match today's standard of using CSS to style elements.
Change your JavaScript code to:
function handleMDown() {
document.getElementById("imagechange").src="put your holding button down source here";
}
function handleMUp()
{
document.getElementById("imagechange").src="put your NOT holding button down source here";
}
Check out fiddle here.
I am new to html, I am simply trying to add a caption on top or below each image in the code below; inputs welcome. It seems that an additional option is needed on the line where pictures are included; i have tried alt="my image description", it adds and info link "i" on the page, but I would need to place it above or below the image.
<head>
<title> identity </title>
<meta http-equiv="content-type"
content="text/html;charset=utf-8" />
<link href = "../includes/important.css" rel= "stylesheet" type ="text/css" />
<link href="../includes/slide-out-menu-new.css" rel="Stylesheet" type="text/css"/>
<script src="../includes/js/slide-out-menu-new.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="../assignments/galleria/themes/classic/galleria.classic.css"></script>
<style>
#galleria{ width: 700px; height: 400px; background: #000 }
</style>
</head>
<body>
<div class= "name">
<center> <img src= "../images/main_menu_me.jpg"><center>
</div>
<STYLE TYPE="text/css">
#menu1 { display : none }
#menu2 { display : none }
#menu3 { display : none }
A:link {color:white; text-decoration:none}
A:hover {color:yellow; text-decoration:none}
</STYLE>
<div class="body3">
<div id="galleria">
<img src="../images/lafete1.jpg" image title="My image title" alt="My image description">
<img src="../images/lafete2.jpg">
<img src="../images/lafete3.jpg">
</div>
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria');
</script>
<div class= "navigation2">
</br>
<p align="right"> about</p>
<p align="right"> contact</p>
</body>
</head>
From galleria's doc's:
Captions & meta data
If you want to extract meta data from the HTML source such as title & description, you can provide this as attributes:
<img src="image.jpg"
data-title="My title"
data-description="My <strong>description</strong>"
data-link="http://my.destination.com"
>
Side-note: In HTML5 one can now (by specification) add custom attributes to elements (in the HTML markup) but they must be prefixed with data-. That is what later versions of galleria now use.
Hope this helps!
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.
I'm using this:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
setInterval('reloadImages()', 2000); // 2 seconds
});
function reloadImages()
{
$('#picone').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());
}
</script>
<title>Webcam</title>
</head>
<body>
<div id="first">
<img src="pic.jpg" id="picone" border="1" />
<div>
</body>
</html>
How can I copy/clone the picture and display it in a second/third/fourth... whatever div?
If the picture is to remain the same (and I assume it is?) then you don't need to clone it. So if you had two more images such as:
<img src="pic.jpg" id="pictwo" border="1" />
<img src="pic.jpg" id="picthree" border="1" />
Then you can just do:
$('#picone, #pictwo, #picthree').attr('src', 'http://www.someserver/pic.jpg?' + Math.random());
This of course may not be what you want...
I suppose your HTML for second, third, fourth... div structure look like below:
<div id="first">
<img src="pic.jpg" id="picone" border="1" />
</div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>
Then you can do like this:
$(document).ready(function(){
$('#second, #third, #fourth').each(function(){
$(this).prevAll("#first").children("img").clone().appendTo($(this));
});
});
I have a script that places an image based on a mouse click thanks to Jose Faeti. Now I need help adding a .click() event to the code below so that when a user clicks the image it performs the function shown in the script.
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
I put the entire code below, in case you want to see it.
<html>
<head>
<script language="javascript" type="text/javascript">
<!--
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
// -->
</script>
</head>
<body>
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
</body>
</html>
Help?
First of all, this line
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />.click()
You're mixing HTML and JavaScript. It doesn't work like that. Get rid of the .click() there.
If you read the JavaScript you've got there, document.getElementById('foo') it's looking for an HTML element with an ID of foo. You don't have one. Give your image that ID:
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
Alternatively, you could throw the JS in a function and put an onclick in your HTML:
<img src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" onclick="myfunction()" />
I suggest you do some reading up on JavaScript and HTML though.
The others are right about needing to move the <img> above the JS click binding too.
You can't bind an event to the element before it exists, so you should do it in the onload event:
<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('foo').addEventListener('click', function (e) {
var img = document.createElement('img');
img.setAttribute('src', 'http://blog.stackoverflow.com/wp-content/uploads/stackoverflow-logo-300.png');
e.target.appendChild(img);
});
};
</script>
</head>
<body>
<img id="foo" src="http://soulsnatcher.bplaced.net/LDRYh.jpg" alt="unfinished bingo card" />
</body>
</html>
Enclose <img> in <a> tag.
<img src="smiley.gif">
it will open link on same tab, and if you want to open link on new tab then use target="_blank"
<img src="smiley.gif">
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" >
function openOnImageClick()
{
//alert("Jai Sh Raam");
// document.getElementById("images").src = "fruits.jpg";
var img = document.createElement('img');
img.setAttribute('src', 'tiger.jpg');
img.setAttribute('width', '200');
img.setAttribute('height', '150');
document.getElementById("images").appendChild(img);
}
</script>
</head>
<body>
<h1>Screen Shot View</h1>
<p>Click the Tiger to display the Image</p>
<div id="images" >
</div>
<img src="tiger.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
<img src="Logo1.jpg" width="100" height="50" alt="unfinished bingo card" onclick="openOnImageClick()" />
</body>
</html>