So I have this code (below) that will replace one image. I need this to be modified so it will replace four separate images, and is triggered after a button (image) is clicked.
Can someone help me do this, and also make it so it is triggered after clicking a button (image). Thanks x
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
<script type="text/javascript">
$(document).ready(function() {
function callback(imageLoader){
$('#image').attr('src', imageLoader.nextImage());
}
function ImageLoader(images){
this.images = images;
this.current = 0;
this.nextImage = function(){
this.current = (this.current+1) % this.images.length;
return this.images[this.current];;
}
}
imageLoader = new ImageLoader(['img/wallpaper/2.png', 'img/wallpaper/3.png', 'img/wallpaper/6.png', 'img/wallpaper/10.png']);
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
</body>
</html>
If it helps here is my Design
It's hard to understand what you're trying to do here, but it does seem like a complicated way to swap out some images? Maybe something more like this would be easier :
$(document).ready(function() {
var images = ['img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
];
$('#buttonID').on('click', function() {
$('.image').attr('src', function(i, src) {
return images[i];
});
});
});
example HTML:
<body>
<img class="image" src="img/wallpaper/1.png" />
<img class="image" src="img/wallpaper/4.png" />
<img class="image" src="img/wallpaper/7.png" />
<img class="image" src="img/wallpaper/9.png" />
<input type="button" id="buttonID" value="Change images" />
</body>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var imageLoader;
function ImageLoader(images)
{
this.images = images;
this.current = 0;
this.nextImage = function()
{
this.current = (this.current+1) % this.images.length;
return this.images[this.current];
}
}
$(document).ready(function()
{
imageLoader = new ImageLoader(
[
'img/wallpaper/2.png',
'img/wallpaper/3.png',
'img/wallpaper/6.png',
'img/wallpaper/10.png'
]);
$('#change').on('click', function()
{
$('#image').attr('src', imageLoader.nextImage());
});
});
</script>
</head>
<body>
<img id="image" src="img/wallpaper/1.png">
<input type="button" id="change" value="Change" />
</body>
</html>
Related
I'm doing a schoolproject, trying to do an list of things you need to buy.
The problem is, i can't write more than one time and add to the list, and i can't figure out why.
(It's nowhere near done.) (i have to diffrent javascript files)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="main.css" type="text/css" rel="stylesheet">
<title>Inköpslista</title>
</head>
<body>
<div id="kol1" class="kol">
<h1>Inköp</h1>
<input type="image" src="img/button.png" alt="Submit" id="storknapp" onclick="klickaKnapp('skriva')"/>
<input type"text" id="skriva" placeholder="Skriv din vara här!"/>
<input type="image" id="knapp" src="pluss.png" alt="Submit"/>
</div>
<div id="kol2">
<ul id="listaavvara"></ul>
</div>
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
</body>
</html>
function laggtill(cool, namnVara) {
var vara = document.createElement("li");
vara.innerText = namnVara;
cool.appendChild(vara);
}
var button = document.getElementById("knapp");
button.onclick = function() {
var skriva = document.getElementById("skriva")
var namnVara = skriva.value;
if(!namnVara|| namnVara =="" || namnVara == " " ){
return false;
}
laggtill(document.getElementById("listaavvara"), namnVara);
};
javascrpit 2:
function klickaKnapp(x){
var skrivrutan = document.getElementById(x), maxH="100px";
if(skrivrutan.style.height == maxH){
skrivrutan.style.height = "0px";
} else {
skrivrutan.style.height = maxH;
}
}
HOPEFULLY YOU KNOW WHAT I MEAN! (my pictures are not here)
Because
var button = document.getElementById("knapp");
button.onclick = function() { ... }
overrides the inline event handler. You need to attach events with addEventListener
button.addEventListener("click", function(){...}, false);
Your example works for me on fiddle: http://jsfiddle.net/7zjb86ab/
So this looks like there is something wrong with your imported scripts
<script src="menudropdown.js" type="text/javascript"></script>
<script type="text/javascript" src="java.js"></script>
Are those the two files with your javascript snippets inside?
You could also try to replace
var button = document.getElementById("knapp");
button.onclick = function() {
with
function addItem() {
and then add the function as onclick attribute like you do with the klickaKnapp function
<input type="image" id="knapp" src="pluss.png" alt="Submit" onclick="addItem()" />
I am trying to add a source to an image through Javascript, and some JQuery code I found on internet, but it doesn't seem to work:
<html>
<head>
<script src = "http://www.example.com/images/">
var count=1;
var initnumber=100;
function changeImage(){
count++;
$("#HTMLPhoto").attr('src'+((initnumber+count).toString)+".jpg");
}
</script>
</head>
<body onload="changeImage()" >
<img id="HTMLPhoto"/>
<button onclick="changeImage()">Next Image</button>
</body>
I am also trying to call once again the changeImage() function with button clicks.
Edit:Managed to make it work, I changed the code a bit, if anyone wants to see:
<html>
<head>
<script>
var count=1;
function nextImage(address){
count++;
image = document.getElementById('HTMLPhoto');
image.src ="http://www.example.com/images/"+(address+count)+".jpg";
}
</script>
</head>
<body>
<img id="HTMLPhoto"/>
<button onclick="nextImage(100)">Next Image</button>
</body>
Change:
$("#HTMLPhoto").attr('src'+((initnumber+count).toString())+".jpg");
To:
$("#HTMLPhoto").attr('src', ((initnumber+count).toString())+".jpg");
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 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>
I'd like to change the buttons below used to change images to links/images instead. Any help would be appreciated! Thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type='text/javascript'>
onload = function() {
var buttonData = [
{src:'fareast.gif', href:'http://google.com'},
{src:'middlearth.jpg', href:'http://yahoo.com'},
{src:'europe.jpg', href:'http://chappo.cc'}
];
var $im1 = $("[name='im1']").click(function(){ window.open($(this).attr('href')); });
$(".imgSwap").each(function(i) {
var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
$b.click(function() { $im1.attr({src:d.src,title:$(this).html(),href:d.href}); });
if(i==0) { $b.click(); }
});
};
</script>
</head>
<body>
<img name="im1" height="300" width="300" /><br/>
<button class="imgSwap">Far East</button>
<button class="imgSwap">Middle Earth</button>
<button class="imgSwap">Europe</button>
</body>
</html>
Please Help!
First, the HTML:
<img src="path/to/image/far_east_button.gif" class="buttonImage" />
<img src="path/to/image/middle_earth.gif" class="buttonImage" />
<img src="path/to/image/europe.gif" class="buttonImage" />
Then, buttonData:
var buttonData = [
//titles added
{src:'fareast.gif', href:'http://google.com', title:'Far East'},
{src:'middlearth.jpg', href:'http://yahoo.com', title:'Middle Earth'},
{src:'europe.jpg', href:'http://chappo.cc', title:'Europe'}
];
Then, the click handler:
$(".imgSwap").each(function(i) {
var $b = $(this), d = buttonData[i] || buttonData[buttonData.length-1];
$b.click(function() {
$im1.attr({src:d.src, title:d.title, href:d.href});//note change to composition of title
return false;//Added to suppresses default hyperlink action of <a> links.
}).attr('title', d.title);
if(i==0) { $b.click(); }
});
Hope this will solve the Problem.
Do this
<script>
function changeImg(val)
{
if(val == 1)
{
document.getElementById('im1').src = "fareast.gif";
}
if(val == 2)
{ document.getElementById('im1').src = "middlearth.jpg";}
if(val == 3)
{ document.getElementById('im1').src = "europe.jpg";}
}
</script>
<img name="im1" id='im1' height="300" width="300" /><br/>
<button class="imgSwap" onclick="changeImg('1');">Far East</button>
<button class="imgSwap" onclick="changeImg('2');">Middle Earth</button>
<button class="imgSwap" onclick="{changeImg('3');">Europe</button>