I've looked at similar questions and answers on Stack Overflow which I can't get to work. everything is find when the page loads but when I mouse over it doesn't show the new gif.
When inspecting the code in the browser it seems to be switching between the two images.
<!DOCTYPE html>
<html>
<head>
<script>
function normalImg() {
document.getElementById("smile").src = "/smiley.gif"
}
function singing() {
document.getElementById("smile").src = "/sing.gif"
}
</script>
</head>
<body>
<img onmouseout="normalImg()" border="0" src="smiley.gif" alt="Smiley" width="32" height="32" id="smile"
onmouseover="singing()" border="0" src="sing.gif" alt="singing" width="32" height="32">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
you should have only one src attribute inside < img /> tag, you could try the code below:
<!DOCTYPE html>
<html>
<head>
<script>
function singing() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/0/06/180717_%EC%97%B4%EB%A6%B0%EC%9D%8C%EC%95%85%ED%9A%8C_%ED%8A%B8%EC%99%80%EC%9D%B4%EC%8A%A4_%2818%29.jpg"
document.getElementById("smile").alt="smiling"
}
function crying() {
document.getElementById("smile").src = "https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png"
document.getElementById("smile").alt="crying"
}
</script>
</head>
<body>
<img onmouseover="singing()" onmouseout="crying()" src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chou_Tzuyu_at_the_Golden_Disc_Awards_2019.png" alt="singing" width="100" height="100" id="smile">
<p>onmouse out and onmouseover changing images</p>
</body>
</html>
You don't need the / at the start of your path to gif.
Replace
document.getElementById("smile").src = "/smiley.gif"
with
document.getElementById("smile").src = "smiley.gif"
Same for the sing.gif
Instead of using javascript to change image source on mouseout and mouseover, it will be better to change image source on based on just hover.
Check this out:
CSS: Change image src on img:hover
Hover handles both a mouseenter event and a mouseleave event.
Mouseover is best for situations where you only care when the mouse has crossed the border into an element and you don't really care what happens if it leaves. If you want to trigger some event on the element.
Related
As soon as I load or reload the page. The gif i've included in the html starts playing.
$('.text').mouseover(function() {
$('.hover').css("visibility", "visible"); })
$('.text').mouseout(function() {
$('.hover').css("visibility", "hidden"); });
I want the gif to start whenever I hover over the relevant element and stop when I take my cursor off. This JS is in a script tag within the body of HTML doc. It works after I hover over the 'text' element for the first time. Would love some guidance on what I am doing wrong.
It's likely that the visibility of the image is visible on the initial page load. When you do your first mouseover, then mouseout, it gets set to hidden, which is your expected behavior. Try setting the visibility of the img to hidden, by one of these methods:
Add a style in the head of the page:
<html>
<head>
<style>
img.hover { visibility: hidden; }
</style>
</head>
<body>
<img src='path/to/image.gif' class='hover' />
</body>
</html>
Or, set the style inline in the image itself:
<html>
<body>
<img src='path/to/image.gif' class='hover' style='visibility: hidden' />
</body>
</html>
I'm having a problem with disable scrolloing on iframe of Google My Maps (custom maps). Since this has also clickable events I cannot use CSS "pointer-events:none". I tried also "scrolling:no" on the iframe itself, but both this methods doesn't work. I finally use a javascript as.
<script>
$(".map").bind("mousewheel", function() {
return false;
});
</script>
And it works, but when I click in one of the links start scrolling again. How can I disable scrolling definetly but still use the clickable events.
A working example:
<!DOCTYPE html>
<html>
<head>
<style>
.scrolloff {
pointer-events: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#map').addClass('scrolloff'); // set the mouse events to none when doc is ready
$('#overlay').on("mouseup",function(){ // lock it when mouse up
$('#map').addClass('scrolloff');
//somehow the mouseup event doesn't get call...
});
$('#overlay').on("mousedown",function(){ // when mouse down, set the mouse events free
$('#map').removeClass('scrolloff');
});
$("#map").mouseleave(function () { // becuase the mouse up doesn't work...
$('#map').addClass('scrolloff'); // set the pointer events to none when mouse leaves the map area
// or you can do it on some other event
});
});
</script>
</head>
<body>
<div id="overlay" class="map">
<iframe id="map" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyCjUE83FHrXTQWf9umcNDzyu0s7aNzHszw
&q=Space+Needle,Seattle+WA" width="100%" height="500" frameborder="0" ></iframe>
</div>
</body>
</html>
Live demo: http://kylelam.github.io/iframe.html
Is there a jquery/js script that will listen for an onHover event?
I'm building a listening library and we want to include the ability to help the website owner detect when a user initiates an onHover event - so they know it was taking the attention of their visitor/user.
Listen for onHoverStart (when they mouse on an element that has an onHover associated with it) & onHoverEnd (when they mouse away from the element).
This is a simple example which works with onmouseenter and onmouseleave I modified from http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover
When a user hovers the image gets bigger. When hovering stops the image returns to normal size. You can also customize the function to do what ever you want onmouseenter and onmouseleave
<!DOCTYPE html>
<html>
<body>
<img onmouseover="WhenUserHovers(this)" onmouseout="WhenUserStopsHovering(this)" border="0" src="smiley.gif" alt="Smiley" width="32" height="32">
<p>The function WhenUserHovers() is triggered when the user moves the mouse pointer over the image.</p>
<p>The function WhenUserStopsHovering() is triggered when the mouse pointer is moved out of the image.</p>
<script>
function WhenUserHovers(x) {
x.style.height = "64px";
x.style.width = "64px";
}
function WhenUserStopsHovering(x) {
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</body>
</html>
Also you can make use of jQuery (a javascript library) mouseenter and mouseleave http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseenter_mouseleave
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseenter(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseleave(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
Or jQuery's mouseover and mouseout http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_mouseover_mouseout
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
});
</script>
</head>
<body>
<p>Move the mouse pointer over this paragraph.</p>
</body>
</html>
The difference between jQuery's mouseenter/mouseleave and mouseover/mouseout is mouseenter works when the mouse pointer enters the selected element while mouseover works when the pointer enters the element or any child elements of the element.
to detect the hover with jquery use this
$("selector").hover(function(){
//do something when it is hover
},function(){
//do something when you lose hover
});
you can read more about this here https://api.jquery.com/hover/
whats the problem with this code? It doesn't work on Google Chrome. I want to rotate the picture dynamically with javascript and webkit transform.
<html>
<head>
<title></title>
<script>
document.getElementById('img1').style.webkitTransform = "rotateX(-40deg)";
</script>
</head>
<body>
<img id="img1" src="1.jpg" />
</body>
</html>
Try this instead - the script needs to be executed after the DOM has loaded - so i have moved it to appear after the img element
<html>
<head>
<title></title>
</head>
<body>
<img id="img1" src="1.jpg" />
<script>
document.getElementById('img1').style.webkitTransform = "rotate(-40deg)";
</script>
</body>
</html>
And your using the wrong webkitTransform function ... you should be using rotate
Working example
Rotating over the x-axis is undefined. Use a plain rotate instead. Furthermore, you're trying to refer to an element which does not exist at run-time. Either defer the script load, or:
It's pure CSS, I suggest to replace the whole <script> block with:
<style>
#img1 {
-webkit-transform: rotate(-40deg);
}
</style>
Note: This code will only show a rotation in webkit-based browsers. For optimum browser compatibility, don't forget to use the -moz-, -o- and -ms- and prefixless prefixes.
As scripts run immediately when they are loaded, the script tag in the head of your document has run before the body has been loaded.
If you move the script tag to the end of the body tag, you should find that it doesn't throw errors.
The following code works:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
But the problem is you have to repeat the inline JavaScript for all img tags. I tried to put the script in the head to no avail:
<html>
<head>
<style type="text/css">
img
{
opacity:0.4;
filter:alpha(opacity=40);
}
</style>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("img");
x.style.opacity=1; x.filters.alpha.opacity=100;
}
</script>
</head>
<body>
<img src="http://www.w3schools.com/Css/klematis.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
<img src="http://www.w3schools.com/Css/klematis2.jpg" width="150" height="113" alt="klematis"
onmouseover="getElements()"
onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40" />
</body>
</html>
Everything seems right to me, but it doesn't work.
Many thanks for any help!
Mike
document.getElementsByTagName returns a collection (which is a lot like an array), not an HTMLElementNode. Its members have a style property, but it doesn't have one of its own, and you can't distinguish the element on which the event happened from any other.
A step in the right direction would be:
function makeSolid(element) {
element.style.opacity=1; x.filters.alpha.opacity=100;
}
and then onmouseover="makeSolid(this)"
A further step in the right direction would be to use unobtrusive JavaScript and attach the events using JS instead of using intrinsic event attributes. Due to differences between browsers, using an event handling library to iron out the differences would be wise.
Since this depends on JS, the * initial* styling should be withheld until JS is confirmed to be on. Setting document.body.className = 'js' and then using .js ... as a descendent selector in each CSS ruleset is a popular way to do this.
Since this appears to be simply presentational, a further improvement would be to forget about JavaScript entirely and just do it using CSS:
img {
opacity:0.4;
filter:alpha(opacity=40);
}
img:hover {
opacity:1;
filter:alpha(opacity=100);
}
Pass a reference to the element into the function, using this:
function getElements(x) {
x.style.opacity=1; x.filters.alpha.opacity=100;
}
Called like this:
onmouseover="getElements(this)"