Pretty simple function here but not working. Just started with Javascript so be gentle with me. Also does anyone know of any good community forums for beginners. I feel this is such a simple question to ask on here, but maybe not.
<html>
<head>
<script type="text/javascript">
var img;
function mouseOver()
{
alert(img);
img.src ="button_over.jpg";
}
function mouseOut()
{
img.src ="button_out.jpg";
}
function init()
{
img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];
}
</script>
</head>
<body onLoad="javascript:init()">
<div id="buttonWrapper">
<img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver()" onmouseout="mouseOut()" / >
</div>
</body>
</html>
Live demo: http://jsfiddle.net/jTB54/
Just put this code at the bottom of the page (right before </body>) and you won't need an onload handler:
var img = document.getElementById("buttonWrapper").getElementsByTagName('img')[0];
img.onmouseover = function() {
this.src = "button_over.jpg";
}
img.onmouseout = function() {
this.src = "button_out.jpg";
}
I don't know if this will fix your problem, but wouldn't it be easier to do something like this?
<html>
<head>
<script type="text/javascript">
function mouseOver(img)
{
img.src ="button_over.jpg";
}
function mouseOut(img)
{
img.src ="button_out.jpg";
}
</script>
</head>
<body>
<div id="buttonWrapper">
<img border="0" src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" />
</div>
</body>
</html>
JavaScript is a solution for your issue but I would recommend a different approach: Use CSS instead!
Here a tutorial I found on Google:
http://inspectelement.com/tutorials/create-a-button-with-hover-and-active-states-using-css-sprites/
This also will solve the 'preloading issue' you will face, means: When you go with the mouse over the button the hover image needs time to load. the result will be a gap in the displaying of the images (for a half second there will be no image displayed).
I would suggest learning and using JQuery:
http://jquery.com/
There are a lot of good tutorials on the site, and you can Google for more.
Here is a snippet from a site that has a few buttons that have mouseover, mouseup, mousedown, and hover states. Each button state has its own image, of course:
$(function () {
$("#btnPrintSheet").mousedown(function () {
$(this).attr("src", BASE_IMG_PATH + "printDN.gif");
}).mouseup(function () {
$(this).attr("src", BASE_IMG_PATH + "printOV.gif");
}).hover(function () {
$(this).attr("src", BASE_IMG_PATH + "printOV.gif");
}, function () {
$(this).attr("src", BASE_IMG_PATH + "printUP.gif");
});
});
You can add a click event handler to that as well...
The function init() can be removed since we don't really need it.
Below is a shorter version of your code.
<html>
<body>
<div>
<img src="button_out.jpg" width="62" height="74" onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" / >
</div>
</body>
<script>
var mouseOver = img => {
img.src ="button_over.jpg";
}
var mouseOut = img => {
img.src ="button_out.jpg";
}
</script>
</html>
Do yourself a HUGE favor - if you're just getting started with Javascript, learn jQuery. It will drastically simplify what you're trying to do. Go to here
In this case, you can easily tie a click event to your img tag with examples here.
Related
I am attempting to make it so that when you drag an image from your files or the internet into the drop area it makes an image on the page take the SRC of that image. This seems like it would be easy, but I have looked all over the internet
and have been unable to figure this out. Chrome throws the error:
'No function was found that matched the signature provided'.
<!doctype html>
<html>
<head>
<script>
function dropHandler(ev) {
ev.preventDefault();
img = new Image();
fileTransferred = ev.dataTransfer.items[0];
img.src = window.URL.createObjectURL(ev.dataTransfer.items[0]);
ev.dataTransfer.items.clear();
ev.dataTransfer.clearData();
window.URL.revokeObjectURL(img.src);
}
function dragOverHandler(ev) {
ev.preventDefault();
}
</script>
</head>
<body>
<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p>Drag a picture here.</p>
</div>
</body>
</html>
Why doesn't this work?
After a bit of checking, I found out that you should make it behave as a file, not an item. Demo that shows this is here.
JS
function dropHandler(ev) {
ev.preventDefault();
img = new Image();
fileTransferred = ev.dataTransfer.files[0];
img.src = window.URL.createObjectURL(fileTransferred);
ev.dataTransfer.items.clear();
ev.dataTransfer.clearData();
window.URL.revokeObjectURL(img.src);
alert(img.src);
}
function dragOverHandler(ev) {
ev.preventDefault();
}
OK, so here's the setup. I have an expandable banner that swaps out the HTML of the smaller initial banner to the larger expanding banner. (In this test it expands from 160px wide to 600px wide.) I also have the second HTML page jump to a specific scene in my exported Tumult Hype (An HTML 5 animation program) files.
The function
"postToHype()"
uses postMessage to pass off to the second HTML document HypeExample to tell it to open to the second scene of the document. So in theory, what happens is the ad not only expands and loads the second HTML document, but it also then jumps to the second scene in that document.
This is working for me; it triggers the "postToHype()" function when I mouseover the ad. This also works when I tested using a button which also triggers the
"combine()"
function. The "combine()" function ALSO triggers the function
"autoExpand()"
which opens the ad for 7 seconds and then closes it again.
What I can't get to work is having window.onload call the "combine();" function. When window.onload fires "combine()" , "autoExpand()" works but "postToHype()" does not. Why does the button click and onmouseover work with my "postToHype()" function, but "window.onload" does not?
Not all of the code is shown here (such as the linked .js libraries) but I tried to include the most pertinent bits. Any and all ideas are greatly appreciated.
<head>
<script type="text/javascript">
var exampleHTMLToPage = ExpandableBanners.banner("exampleHTMLToPage", "HypeExample.html", 600, 600);
exampleHTMLToPage.setCloseImage("images/close.png", 'right', 'bottom');
exampleHTMLToPage.animated = true;
exampleHTMLToPage.setDirection('down', 'right');
animated = true;
exampleHTMLToPage.expandOnClick = false;
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded",function(){documentReady=true;
});}
else if (!window.onload) window.onload = function(){documentReady=true;}
</script>
<script type="text/javascript">
function autoExpand() {
setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000);
setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000);
}
</script>
<script> function combine() {
autoExpand();
postToHype();
} </script>
<script>
function postToHype(){
document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*')
}
</script>
</head>
<body>
<div onmouseover="postToHype()" id="exampleHTMLToPage" style="width:150px; height:600px; background-color:rgb(30,167,221); position:relative; color:white; font-weight:bold">
<div style="display:inline-block;
width:140px; font-size:22px; margin-top:20px; margin-left:5px; margin-right:5px;">This is an HTML banner RK V7. Click to see exported HYPE interactive that loaded inside.</div>
</div>
<button onclick="combine();">Click me</button>
</body>
<script>
window.onload = function(){
combine();
};</script>
Change it lite this:
<script type="text/javascript">
function autoExpand() {
setTimeout("ExpandableBanners.openAd('exampleHTMLToPage')",0000);
setTimeout("ExpandableBanners.closeAd('exampleHTMLToPage')",7000);
}
function postToHype(){
document.getElementById('exampleHTMLToPage_expanded_media').contentWindow.postMessage(['start', 'Scene2'], '*')
}
function combine() {
autoExpand();
postToHype();
}
</script>
You need to defining the function postToHype() before you are calling it. And it is better to just use one script tag and write all your code in it.
So im trying to get a div with an iframe in it to reload every 20 sec, i have searched a bit on it, got a code to work on local, but when i upload it to the internet, it wont work, WHY ?. Are there something i am missing ? or something i could put into the code with fixed the whole thing ?
Im running it with jQuery / Javascript.
The Div looks like this:
<script type="text/javascript" src="//cdn.sublimevideo.net/js/hqaz26vv.js"></script>
<script type="text/javascript" src=" [link to the js doc] "></script>
<div id="forsidetop">
<iframe id='a5a8cf25' name='a5a8cf25' src='http://pixel.tv/ads/www/delivery/afr.php?zoneid=5&cb=INSERT_RANDOM_NUMBER_HERE' frameborder='0' scrolling='no' width='728' height='90'><a href='http://pixel.tv/ads/www/delivery/ck.php?n=ae74fd18&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://pixel.tv/ads/www/delivery/avw.php?zoneid=5&cb=INSERT_RANDOM_NUMBER_HERE&n=ae74fd18' border='0' alt='' /></a></iframe>
</div>
And the JS code like this:
var auto_refresh = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
The forsidetop.html (the doc that reloads)
<iframe id='a5a8cf25' name='a5a8cf25' src='http://pixel.tv/ads/www/delivery/afr.php?zoneid=5&cb=INSERT_RANDOM_NUMBER_HERE' frameborder='0' scrolling='no' width='728' height='90'><a href='http://pixel.tv/ads/www/delivery/ck.php?n=ae74fd18&cb=INSERT_RANDOM_NUMBER_HERE' target='_blank'><img src='http://pixel.tv/ads/www/delivery/avw.php?zoneid=5&cb=INSERT_RANDOM_NUMBER_HERE&n=ae74fd18' border='0' alt='' /></a></iframe>
Apparently i should have specified the path a little better even tho it is in the same folder as the script
#Henry Tran did come up in a commend with the specified path and it did work
adforsidetop = setInterval(function () {
$('#forsidetop').fadeOut('slow', function() {
$(this).load('/adsrefresh/forsidetop.html', function() {
$(this).fadeIn('slow');
});
});
}, 20000); // milliseconds
so THx to him :D
The image replace function works for one swap ,but it does not works for another swap.
i have used complete paths for images in my code.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="file://C:/Users/dell/Desktop/asd.png" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("file://C:/Users/dell/Desktop/Capture.png")) {
image.src = "file://C:/Users/dell/Desktop/asd.png";
} else {
image.src = "file://C:/Users/dell/Desktop/Capture.png";
}
}
</script>
</body>
</html>
getAttribute() returns exactly what was in the HTML. It may be a relative URL.
.src returns a fully qualified absolute URL, even if what was in the HTML was a relative URL.
img.src will return values like file:///C:/Users/dell/Desktop/asd.png hence condition fails.
Try this:
function changeImage() {
var image = document.getElementById('myImage');
if (image.getAttribute('src').match("file://C:/Users/dell/Desktop/Capture.png")) {
image.src = "file://C:/Users/dell/Desktop/asd.png";
} else {
image.src = "file://C:/Users/dell/Desktop/Capture.png";
}
}
<h1>JavaScript Can Change Images</h1>
<img id="myImage" onclick="changeImage()" src="file://C:/Users/dell/Desktop/asd.png" width="100" height="180">
<p>Click the light bulb to turn on/off the light.</p>
You are doing two different things one is u are using a html document where u are calling a file and another is image so instead of using any other javascript events u can use file:///path
<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("file:///C:/Users/dell/Desktop/Capture.png")) {
image.src = "file:///C:/Users/dell/Desktop/asd.png";
} else {
image.src = "file:///C:/Users/dell/Desktop/Capture.png";
}
}
</script>
<script>
function start(){
sprites.start();
preloader();
}
</script>
I am having two functions one to preload and other to load the image. Both functions running succesfully but what i want is stop preload function to execute and shows the next function when ever image loading is done.
Briefly i want to hide the preload function and show the sprite function after loading of sprite function
Take a look at this:
Wait for image to be loaded before going on
Here is a simple mockup:
<html>
<head>
<script language="javascript">
function loadImage()
{
var img = new Image();
img.src = 'img_navsprites.gif';
console.log( '1. Image has just started downloading.' );
document.getElementsByTagName('body')[0].appendChild(img);
img.onload = function() {
console.log( '2. Image has fully loaded.' );
}
console.log( '3. Hey, look at me ... all the way down here!' );
}
</script>
</head>
<body onload="loadImage()">
<div>
</div>
</body>
</html>
And a another mockup at PasteBin based on your code:
http://pastebin.com/wcBY2YaL