I wanted to generate an alert box when user moves his mouse on the star image. I tried to check the errors but I am not able to find error.
<html>
<head>
<title>Testing</title>
<link rel="stylesheet" type="text/css" href="rating_style.css"/>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
</head>
<body>
<center>
<div class="rating-container">
<div class="rating-star">
<img src="sta.png" width="50" id="1_star" />
<img src="sta.png" width="50" id="2_star" />
<img src="sta.png" width="50" id="3_star" />
<img src="sta.png" width="50" id="4_star" />
<img src="sta.png" width="50" id="5_star" />
</div>
</div>
</center>
</body>
</html>
you should include jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#1_star").hover(function() {
alert("hello");
});
});
</script>
Working Example
Note: This code will work .. but please searching for how to include
jquery or how to install jquery because there are different ways to do
that
Since you don't need both a mouse in and a mouse out (that is what hover is really for), you might want to use .mouseover() instead.
you can use this method :
<div onmousemove="alert('hello')">
<p>onmousemove: <br> <span id="demo">Your Text</span></p>
</div>
Related
function init(){
th=document.getElementById('divId').getElementsByTagName('img');
for(c=0;c<th.length;c++) {
th[c].onclick=function() {
swapImage(this.src);
}
}
}
function swapImage(url){
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
document.getElementById('mainImage').src=url;
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);
I'm mainly new to JS here, my main issue is specifically the JS section please help, I've been going at this for 4 days now. What the code should do is display a top image, and 5 thumbnails at the bottom. When clicked the thumbnails should display on to by switching with the current image.
Here is the HTML section of the code:
<html>
<head>
<link href='gallery.css' type="text/css" rel ='stylesheet'/>
<title>Gallery</title>
</head>
<body>
<img id="mainImage" src="Images/alphamon.jpg"/>
<br />
<div align='center' id="divId" >
<img class="imgStyle" src="Images/alphamon.jpg" />
<img class="imgStyle" src="Images/gallantmon.jpg" />
<img class="imgStyle" src="Images/omnimon.jpg" />
<img class="imgStyle" src="Images/omnimon_2.jpg" />
<img class="imgStyle" src="Images/royal_knights.jpg" />
</div>
<script type='text/javascript' src='gallery.js'></script>
</body>
</html>
Everything is much easier.
function swapImage(url){
/* no need this code
str=url.lastIndexOf(".");
str1=url.substring(str-1);
str2=url.substring(str);
url=url.replace(str1,str2);
*/
document.getElementById('mainImage').src=url;
}
I want to create a click-able image that has a name,class and id, if I click on that image it should show the id of that image without using database or post.For example:
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink" />
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink" />
</div>
If I click one of the images, it should display the id swimmingDrop or runningDrop.
simply onclick="alert(this.id)"
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink"
onclick="alert(this.id)"/>
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink"
onclick="alert(this.id)"/>
</div>
and as I said in comment while you tagged jquery this is jquery solution
$('img').on('click', function(){ alert($(this).attr('id')) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink"/>
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink"/>
</div>
I suggest using jquery as it will make life easier:
$('img').on({
click: function(){
alert($(this).attr("id"));
}
})
<html>
<head>
<title>sample Page</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
$('img').click(function () {
alert($(this).attr("id"));
});
});
</script>
</head>
<body>
<div class='widget-content' style="min-height: 300px;">
<img src="images/icons/running.jpg"
id="runningDrop"
class="droplink" />
<img src="images/icons/swimming.jpg"
id="swimmingDrop"
class="droplink" />
</div>
</body>
</html>
This question already has answers here:
javascript <script> tag - code execution before src download
(4 answers)
Closed 8 years ago.
I'm quite new in JS and while trying to make a zoom in when mousing over an image, the javascript does absolutely nothing.
I'm trying the following script:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(function(){
$(".image").mouseover(function()
{
$(this).css("cursor","pointer");
$(this).animate({width: "500px"});
}
);
$(".image").mouseout(function()
{
$(this).animate({width: "250px"}, "slow");
}
);
});
</script>
The html in which I would like to apply it is:
<div id="main">
<div id="title">
<h1 class="fila1">RAINBOW BIDDING MONTHLY REPORT</h1>
</div>
<div id="img1" class="align">
<img class="imagen1" SRC="URL1" />
</div>
<div id="img2" class="align">
<img class="image" SRC="URL2" />
<img class="image" SRC="URL3" />
</div>
</div>
I have removed the images' URLs due to a business security issue.
Any help will be much appreciated!
You can't mix "internal" and "external" javascript within the same tag.
Replace...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
$(function(){
With...
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
It may be very silly question, I am new in javascript ,I Making a gallery using http://photoswipe.com/ js library ,I download js library from official site , I used given example index.html page
Normal working fine. But my problem when I append div $('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>'); on <div class="gallery-row"></div> using jquery append method from load function.
My problem : image show but when I click on the image then it not open with swipe div .
I waste my whole day but didn't get anything.
my code:
<!DOCTYPE html>
<html>
<head>
<title>PhotoSwipe</title>
<meta name="author" content="Code Computerlove - http://www.codecomputerlove.com/" />
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
<link href="styles.css" type="text/css" rel="stylesheet" />
<link href="photoswipe.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="code-photoswipe-1.0.11.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// Set up PhotoSwipe with all anchor tags in the Gallery container
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
function load(){
//append div from this function
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
}
</script>
</head>
<body onLoad="load()">
<div id="Header">
<img src="images/codecomputerlovelogo.gif" width="230" height="48" alt="Code Computerlove" />
</div>
<div id="MainContent">
<div class="page-content">
<h1>PhotoSwipe</h1>
</div>
<div id="Gallery">
<div class="gallery-row">
<!--
<div class="gallery-item"><img src="images/thumb/001.jpg" alt="Image 001" /></div>
<div class="gallery-item"><img src="images/thumb/002.jpg" alt="Image 002" /></div>
<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>
-->
</div>
</div>
</div>
</body>
</html>
Try doing the append in the DOMContentLoaded handler, before you call Code.photoSwipe. Also, jQuery provides a shorter way to write this:
<script>
$(function() {
$('.gallery-row').append('<div class="gallery-item"><img src="images/thumb/003.jpg" alt="Image 003" /></div>');
Code.photoSwipe('a', '#Gallery');
});
</script>
When you do this, remove onload="load()" from your <body> tag.
Perhaps it's the extra space in the href for your a tag? Try changing "images/full /003.jpg" to "images/full/003.jpg"
I guess, you need to do this :
document.addEventListener('DOMContentLoaded', function(){
Code.photoSwipe('a', '#Gallery');
}, false);
After the append
After some Test, DOMContentLoaded is fired before onload
I'm setting up orbit according to this guide and for some reason it is not working at all. I'm sure its something incredibly simple being that there are only like 2 steps to follow, but I'm really not seeing it and could use a second set of eyes. Let me know if you see what the issue is, thanks!
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.orbit.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/orbit.css">
<script type="text/javascript">
$(window).load(function() {
$('#featured').orbit();
});
</script>
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
Check your paths to jQuery and orbit JS files are correct and loading.
Try using $(document).ready();
<div id="featured">
<img src="1.jpg" alt="Overflow: Hidden No More" />
<img src="2.jpg" alt="HTML Captions" />
<img src="3.jpg" alt="and more features" />
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#featured').orbit();
});
</script>