Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo
Related
I have a container in which it is a horizontal scroll slider. I am just trying to figure how to show the element that is in the viewport at the time
I tried to look for left. I tried to put the slides in an array and look for the x axis but I am a little stumped.
This is my scroll function.
const scroll = () => {
const scrollContainer = document.querySelector('.slider');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="slider hidden" id="slideshowContainer">
<div class="innerSlider" id="innerSlider">
<div class="slide">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
</div>
</div>
</body>
</html>
HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="engine1/style.css" />
<script type="text/javascript" src="engine1/jquery.js"></script>
<script type="text/javascript" src="javascript1.js"></script>
<link rel="stylesheet" type="text/css" href="../css/style1.css" />
</head>
<body>
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
</body>
</html>
javascript1.js
document.getElementByclassName("menu ul li").style.padding = "1.5vh 50px
1.5vh 50px";
CSS
.menu{
width:100%;
opacity:70%;
}
.menu ul{
width:100%;
display:inline;
}
.menu ul li{
font-size: x-large;
float: left;
list-style: none;
text-decoration: none;
color:yellow;
background-color:green;
padding:1.5vh 86px;
}
I have done the coding so when the page opens it should show menu shrunk from 86px to 50px, but it is showing 86px right and left padding. The Javascript code is not reflecting. My goal is to obtain a screen width constant and then changing the padding according to it using Javascript. But first as I'm new to Javascript I just wanted to test if my Javascript code is working or not and it's not reflecting.
This will not work, because you are mixing class name and tag name.
Please, use document.querySelector or document.querySelectorAll if you need to update all findings.
document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px")
UPDATE Here is a working demo for the provided markup. Everything works perfectly. The issue is here: <script type="text/javascript" src="javascript1.js"></script> You loads your JS before DOM. So when JS starts working, it can't find the expected DOM elements cause they are not yet loaded. To fix the issue, move JS to the bottom of the file.
[...document.querySelectorAll('.menu ul li')].forEach(el=> el.style.padding = "1.5vh 50px 1.5vh 50px");
<div class="wrap">
<div class="sec1">
<div class="logo">
<img src="../images/logo.png" width="100%" height="150px">
</div>
<div class="heading">
<h1 style="color:lawngreen;">CITY STORE
<br>KIRANA & GENERAL</h1>
</div>
</div>
<div class="sec2">
<div class="menu">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
<li>GALLERY</li>
<li>SERVICES</li>
</ul>
</div>
</div>
<div class="slider">
<!-- Start WOWSlider.com BODY section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container1">
<div class="ws_images">
<ul>
<li><img src="data1/images/1.jpg" alt="" title="" id="wows1_0" />
</li>
<li><img src="data1/images/p2.jpg" alt="" title="" id="wows1_1" />
</li>
<li><img src="data1/images/p3.jpg" alt="" title="" id="wows1_2" />
</li>
<li><a href="http://wowslider.net"><img src="data1/images/p4.png" alt="bootstrap slider"
title="" id="wows1_3" /></a></li>
<li><img src="data1/images/p5.jpg" alt="" title="" id="wows1_4" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<span><img src="data1/tooltips/1.jpg" alt="" />1</span>
<span><img src="data1/tooltips/p2.jpg" alt="" />2</span>
<span><img src="data1/tooltips/p3.jpg" alt="" />3</span>
<span><img src="data1/tooltips/p4.png" alt="" />4</span>
<span><img src="data1/tooltips/p5.jpg" alt="" />5</span>
</div>
</div>
<div class="ws_script" style="position:absolute;left:-99%">wow slider
by WOWSlider.com
v9.0</div>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/wowslider.js"></script>
<script type="text/javascript" src="engine1/script.js"></script>
<!-- End WOWSlider.com BODY section -->
</div>
<div class="pre-sec3-bar"></div>
<div class="sec3">
<div class="sec3-heading">
<h1>WELCOME TO CITY STORE</h1>
<h2>WHY
CHOOSE US ?</h1>
</h2>
</div>
<div class="sec3-content">
<div class="sec3-content-pic"><img src="../images/p6.png" width="100%" height="350px"></div>
<div class="sec3-content-para">
<h3>CITY STORE GROCERIES.</h3>
</div>
</div>
</div>
<div class="sec4">
<div class="sec4-para"><img src="../images/img2.png" width="100%" height="363px"></div>
<div class="sec4-image"><img src="../images/shop.jpg" width="100%" height="360px"></div>
</div>
<div class="sec5">
<div class="sec5-img"><img src="../images/shop3.jpg" width="100%" height="430px"></div>
<div class="sec5-para">
<h3>.</h3>
</div>
</div>
<div class="sec6">
<div class="sec6-header">
<h3>OUR BRANDS</h3>
</div>
<div class="marquee">
<marquee direction="left" scrolldelay="2"><img src="../images/b1.jpg" width="150px" height="150px">
<img src="../images/b2.jpg" width="150px" height="150px">
<img src="../images/b3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
<img src="../images/b5.jpg" width="150px" height="150px">
<img src="../images/b6.jpg" width="150px" height="150px">
<img src="../images/c1.jpg" width="150px" height="150px">
<img src="../images/c2.jpg" width="150px" height="150px">
<img src="../images/c3.jpg" width="150px" height="150px">
<img src="../images/b4.jpg" width="150px" height="150px">
</marquee>
</div>
</div>
<div class="foot">
<h4>(c)2020 SHOP RITE.All Rights Reserved.Powered
by NashInfotech.</h4>
</div>
</div>
Visit https://www.w3schools.com/jsref/met_document_queryselector.asp.
Try with "document.querySelector('.menu ul li').style.padding = "1.5vh 50px 1.5vh 50px";"
I've been searching the internet for someone who is having the same problem but I wasn't able to find a solution. I just can't figure out how to change the source of an image using javascript. I initially thought that it might be because I was writing the javascript in another file instead of within the actual html file but I tried putting the script within the html file and that didn't work either. If someone could tell me if there's something I'm doing wrong that would be great.
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
Simple Description
You need to put the id attribute inside the img tag.
And it needs to be unique. What you are doing now is that you are getting the div which is not the actual image.
Example:
<img var userImg = document.getElementById("c500");
<script>
function changeImg()
{
console.log("here");
userImg.src = "https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg";
}
changeImg();
</script>
JSFiddle: https://jsfiddle.net/m56tq1ba/
Full Source
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" onclick="changeImg()" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="userImg_100" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
<script>
var userImg = document.getElementById('userImg_100');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg';
}
</script>
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
The problem is you are getting the div with the id="u" and assigning the src for that which wont work.
Get the image by assigning an id to it and ge that image tag by its id and assign the image. modified your code little bit as below
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="u_image" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img id="c_image" src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u_image');
var compImg = document.getElementById('c_image');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
I'm currently trying to find the best way to add a drop-down menu that appears upon hover over my navigation bar. A few things to note:
1) I designed my own navigational header in Photoshop and spliced the images. My entire header will consist of nothing but .jpegs and I need to find a way to add a drop down menu when I hover over one of my "buttons" or "images".
2) This will be used for a business so it needs to be compatible with all browsers to a reasonable version date. I.E. included.
Please see my code below:
<html>
<head>
<title>DropDown Design2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<!-- ImageReady Styles (DropDown Design2.psd) -->
<style type="text/css">
<!--
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:864px;
height:216px;
}
#DropDown-Design2-01 {
position:absolute;
left:0px;
top:0px;
width:139px;
height:50px;
}
#DropDown-Design2-02 {
position:absolute;
left:139px;
top:0px;
width:131px;
height:50px;
}
-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- ImageReady Slices (DropDown Design2.psd) -->
<div id="Table_01">
<div id="DropDown-Design2-01">
<img src="images/DropDown-Design2_01.jpg" width="139" height="50" alt="">
</div>
<div id="DropDown-Design2-02">
<img src="images/DropDown-Design2_02.jpg" width="131" height="50" alt=""
</div>
<div id="DropDown-Design2-03">
<img src="images/DropDown-Design2_03.jpg" width="22" height="50" alt="">
</div>
<div id="DropDown-Design2-04">
<img src="images/DropDown-Design2_04.jpg" width="133" height="50" alt="">
</div>
<div id="DropDown-Design2-05">
<img src="images/DropDown-Design2_05.jpg" width="20" height="50" alt="">
</div>
<div id="DropDown-Design2-06">
<img src="images/DropDown-Design2_06.jpg" width="134" height="50" alt="">
</div>
<div id="DropDown-Design2-07">
<img src="images/DropDown-Design2_07.jpg" width="18" height="50" alt="">
</div>
<div id="DropDown-Design2-08">
<img src="images/DropDown-Design2_08.jpg" width="1" height="50" alt="">
</div>
<div id="DropDown-Design2-09">
<img src="images/DropDown-Design2_09.jpg" width="132" height="50" alt="">
</div>
<div id="DropDown-Design2-10">
<img src="images/DropDown-Design2_10.jpg" width="134" height="50" alt="">
</div>
<div id="DropDown-Design2-11">
<img src="images/DropDown-Design2_11.jpg" width="347" height="166" alt="">
</div>
<div id="DropDown-Design2-12">
<img src="images/DropDown-Design2_12.jpg" width="103" height="142" alt="">
</div>
<div id="DropDown-Design2-13">
<img src="images/DropDown-Design2_13.jpg" width="223" height="166" alt="">
</div>
<div id="DropDown-Design2-14">
<img src="images/DropDown-Design2_14.jpg" width="191" height="166" alt="">
</div>
<div id="DropDown-Design2-15">
<img src="images/DropDown-Design2_15.jpg" width="103" height="24" alt="">
</div>
</div>
<!-- End ImageReady Slices -->
</body>
</html>
I understand not much coding has been done in terms of the drop down but currently these images are all set up to form a header with a navigation bar at the very top. At the very least I would greatly appreciate it if someone could link me to a tutorial consisting of what I'm trying to accomplish.
Thank you!
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}