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>
Related
Can someone please explain to me why this plain-jane web page does NOT do what it is supposed to do, that is to say, change the style from display:none; to display:block; ??
thanks!
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null)
{
if (Selem.style.display == "none")
Selem.style.display = "block;"
else
Selem.style.display = "none;"
}
}
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
You are placing the ";" inside the quotations for "block;" and "none;".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
TryIt
<div id="test1" style="display:none;">
This is my content baby!
</div>
<script type="text/javascript">
function ShowHideModal(elemID) {
var Selem = document.getElementById(elemID);
if (Selem != null) {
if (Selem.style.display === "none") {
Selem.style.display = "block";
} else {
Selem.style.display = "none";
}
}
}
</script>
</body>
</html>
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've be working on a website which already has CSS elements and have tried to put a slider in a small css box, but isn't working for some reason. I'm using Jquery from Google API which i linked in the head tag
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Home Page</title>
<link rel="stylesheet" href="mystyle.css" type="text/css"/>
<script type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!---Link to Jquery Library--->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function slider() {
$(".slider#1").show("fade",500);
$(".slider#1").delay(5500).hide("slide",{direction:'left'},500);
var sc=$(".slider img").size();
var count=2;
setinterval(function(){
$(".slider#"+count).show("slide",{direction:'right'},500);
$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},500);
if (count ==sc){
count=1;
}else{
count=count+1;
}
},6500);
}
</script>
</head>
<body onload="slider();">
<div id="RightColContainer">
<div id="RightColContent">
<div class="slider">
<img id="1" src="Slider/Image/Image1.jpg" border="0" alt="Razer Keyboard"/>
<img id="2" src="Slider/Image/Image2.jpg" border="0" alt="Microsoft Office"/>
<img id="3" src="Slider/Image/Image3.jpg" border="0" alt="Razer Mouse"/>
</div>
</div>
</div>
Try to wrap your code inside $(window).load(function() {....}) and remove the function slider from onload function of your body.
$(window).load(function () {
$(".slider#1").show("fade", 500);
$(".slider#1").delay(5500).hide("slide", {
direction: 'left'
}, 500);
var sc = $(".slider img").size();
var count = 2;
setinterval(function () {
$(".slider#" + count).show("slide", {
direction: 'right'
}, 500);
$(".slider#" + count).delay(5500).hide("slide", {
direction: 'left'
}, 500);
if (count == sc) {
count = 1;
} else {
count = count + 1;
}
}, 6500);
}
});
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>
When I run the code on my site it starts off with image jackhammers1 instead of jackhammers0 and won't execute the startBouncing() method. it just displays the form with one image and no animation. It is an example copied from the textbook so I don't see how it shouldn't work.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
/* <![CDATA[ */
var jackhammers = newArray(11);
var curJackhammer = 0;
var direction;
var begin;
jackhammers[0] = "jackhammer0.gif";
jackhammers[1] = "jackhammer1.gif";
jackhammers[2] = "jackhammer2.gif";
jackhammers[3] = "jackhammer3.gif";
jackhammers[4] = "jackhammer4.gif";
jackhammers[5] = "jackhammer5.gif";
jackhammers[6] = "jackhammer6.gif";
jackhammers[7] = "jackhammer7.gif";
jackhammers[8] = "jackhammer8.gif";
jackhammers[9] = "jackhammer9.gif";
jackhammers[10] = "jackhammer10.gif";
function bounce(){
if(curJackhammer == 10)
curJackhammer = 0;
else
++curJackhammer;
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer].src;
if(curJackhammer == 0)
direction = "up";
else if(curJackhammer == 10)
direction = "down";
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer];
}
function startBouncing(){
if (begin)
clearInterval (begin);
begin = setInterval("bounce()",90);
}
/* ]]> */
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100" alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
It starts with jackhammer1 because in the html source you have <img src="jackhammer1.gif"... instead of jackhammer0, and also when the user clicks the button to start bouncing, it will start with jackhammer1 because in the javascript you increment curJackhammer from 0 to 1 before you swap the images.
I think the following code will do what you want... (not sure what you were trying to do with the direction = "up" / "down", though).
And note that curly brackets are usually needed after if and else in javascript, though they are optional if only a single command follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
var curJackhammer = 0;
var begin;
function bounce() {
document.getElementsByTagName('img')[0].src =
'jackhammer' + curJackhammer + '.gif';
curJackhammer ++;
if (curJackhammer > 10) {
curJackhammer = 0;
}
}
function startBouncing(){
if (begin) {
clearInterval (begin);
}
begin = setInterval(bounce,90);
}
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100"
alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>