do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">
Related
I cant change the html or css files. My task is to set a click handler to my thumbnails to enlarge the image in the img within the element. While also setting the figcaption text in the figure to the thumbs title attribute. I need to attach to the div id = thumbnails. My script is not enlarging my thumbnails or titles.
This is what I have so far.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
Is something like this what you were after?
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}
img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>
I am working on a website to view your stats from my Minecraft Pocket Edition server, and I am having a problem.
I have one div with the id "tabs-minigames" and in this div there are 4 boxes with icons, which are these "tabs", and this div is currently not shown (in css display none)
Now, I have a image at the top of the website that you should be able to click to show the div "tabs-minigames", and the tabs show, but don't disappear after clicking a second time. I cannot see what I am doing wrong.
I am using this function in jQuery to show and hide the minigames tab:
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
I don't see anything wrong with the function, and here is the HTML
<html>
<head>
<title>
View your stats - Legion PE
</title>
<link rel="stylesheet" type="text/css" href="styles/main.css"></link>
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var status = false;
$('#sliderimg').on('click', function(){
if(!status){
$("#tabs-minigames").show();
status = true;
}else{
$("#tabs-minigames").hide();
status = false;
}
});
});
</script>
</head>
<body>
<div id="tabs">
<div class="tabs-back">
<div id="tabs-middle">
<img id="sliderimg" src="graphics/slider.png" height="100" width="100" style="position: fixed;padding-left:20px;padding-top: 10px;" style="outline:none;cursor: pointer;"></img>
<div style="padding-left:150px;padding-top:25px;">
<div id="tab-light-box">
Legion PE
</div>
</div>
</div>
</div>
</div>
<div id="tabs-minigames" style="display: none;outline: none;">
<div class="tabs-minigame">
<img src="icons/kitpvp_fullsize.png" width="120" height="110" style="padding-left:15px;padding-top:20px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/spleef_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/bowandarrow_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
<div class="tabs-minigame">
<img src="icons/diamond_fullsize.png" width="120" height="120" style="padding-left:15px;padding-top:15px;"></img>
</div>
</div>
<center>
<div id="center">
</div>
</center>
</body>
</html>
You can see the website live here: http://legionpvp.eu/pe/login/stats.html
Thanks!
you don't have any element with id="div", and that's what you're binding your click to... There's an image with another id, did you mean to use
.delegate("#sliderimg", "click", function(){
}
Also as others have pointed out it's best to use jquery.on(), or in your case you can even just use $('#sliderimg').click() unless you plan to add / remove the element with that id to the page.
you can try this with no need for anything to be true or false
$('#sliderimg').on('click',function(){
$('#tabs-minigames').slideToggle(); // you can use fadeToggle() as well
});
Declare the variable in the $(document).ready function
$(document).ready(function () {
var status = false;
$("#sliderimg").on("click", function () {
if (status === false) {
$("#tabs-minigames").show();
status = true;
} else {
$("#tabs-minigames").hide();
status = false;
}
});
});
I'm trying to change an image src using JavaScript. Unfortunately this doesn't seem to work. Can anyone tell me what I am doing wrong?
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books\thumbnail\10.jpg\">
<img src='books\big\4.jpg' onmouseover='changeImage("books\bigger\4.jpg");'>
<img src='books\big\5.jpg' onmouseover='changeImage("books\bigger\5.jpg");'>
<img src='books\big\6.jpg' onmouseover='changeImage("books\bigger\6.jpg");'>
</div>
Try this:-
<script type="text/javascript">
function changeImage(a) {
document.getElementById("img").src=a;
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg/">
<img src='books/big/4.jpg' onmouseover='changeImage("books/bigger/4.jpg");'>
<img src='books/big/5.jpg' onmouseover='changeImage("books/bigger/5.jpg");'>
<img src='books/big/6.jpg' onmouseover='changeImage("books/bigger/6.jpg");'>
</div>
Here's how I would've done it, makes it a bit more scalable
<script type="text/javascript">
function changeImage(img) {
document.getElementById("img").src = img.src.replace("/big/", "/bigger/");
}
</script>
<div class="fill">
<img id="img" src="books/thumbnail/10.jpg">
<img src='books/big/4.jpg' onmouseover='changeImage(this)'>
<img src='books/big/5.jpg' onmouseover='changeImage(this)'>
<img src='books/big/6.jpg' onmouseover='changeImage(this)'>
</div>
document.getElementById("img").src=a;
Finds element with ID "img". To find current image try
changeImage(this, "books\bigger\4.jpg");
And,
function changeImage(img, string)
{
img.src = string;
}
Try doing this in JavaScript:
document.getElementById("img").onmouseover=changeImage("http://placehold.it/500");
Worked for me.
I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.
I have barely any experience working with DOM and using Javascript, and I have a very specific task that I'm trying to accomplish.
Let's say I have an image in my HTML:
<img src="foo.jpg" />
When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:
<img src="foo.jpg" />
What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.
You could try something among the lines:
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var wrapper = document.createElement('a');
wrapper.setAttribute('href', 'http://www.foobar.com');
wrapper.appendChild(image.cloneNode(true));
image.parentNode.replaceChild(wrapper, image);
}
};
I would recommend you using the excellent jQuery library to manipulate the DOM:
$(function() {
$('img').wrap('<a href="http://foo.com">');
});
In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.
Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->
<script>
$(function() { //Run once DOM is ready
$('img:not([data-nolink])').each(function() { //Iterate through each img element
$(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
});
});
</script>
<style>
h3 {
text-align: justify;
}
img {
width: 200px;
margin: 24px;
}
</style>
</head>
<body>
<h3>These images are generated randomly by loremPixel; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
<hr />
<br />
<img src="//lorempixel.com/400/200?samp1" />
<img src="//lorempixel.com/400/200?samp2" />
<img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
<img src="//lorempixel.com/400/200?samp4" />
<img src="//lorempixel.com/400/200?samp5" />
<img src="//lorempixel.com/400/200?samp6" />
</body>
</html>