I'm trying to call a java script function on my mouse over function for an image, however; the debugger says "function isn't defined." I don't understand why I'm getting this error. The java script and tags look to be correct and it seems like I'm using the correct syntax to call the function.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
<script type="text/javascipt">
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif"
document.getElementById(img).src=buttonImg
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif"
document.getElementById(img).src=buttonImg
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif"
document.getElementById(img).src=buttonImg
}
</script>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</body>
</html>
It doesn't work because you spelled "javascript" wrong.
Change this
<script type="text/javascipt">
to
<script type="text/javascript">
or just
<script>
Otherwise it's assumed that the script tag is something other than javascript
And use lowercase for the events, preferably you'd use addEventListener
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Chapter11-1</title>
</head>
<body>
<div id="banner_logo"><img src="chapter11-1banner.jpg" width="745" height="150" alt="banner" id="banner" /></div>
<table class="centerItems">
<tr>
<td>
<a href="#">
<img src="chapter11-1home_up.gif" id="home" alt="home" onMouseOver="overButton('home')" onMouseDown="downButton('home')" onMouseOut="upButton('home')" onMouseUp="upButton('home')" /></a>
</td>
</tr>
</table>
</body>
<script>
function overButton(img) {
buttonImg="chapter11-1"+img+"_over.gif";
document.getElementById(img).src=buttonImg;
}
function downButton(img) {
buttonImg="chapter11-1"+img+"_down.gif";
document.getElementById(img).src=buttonImg;
}
function upButton(img) {
buttonImg="chapter11-1"+img+"_up.gif";
document.getElementById(img).src=buttonImg;
}
</script>
</html>
Related
I have a finished JQuery for moving a 360° object (picture) with mouse actions.
The code is working:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery j360 Plugin Demo</title>
<script src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/j360.js" ></script>
</head>
<body>
<div class="jquery-script-clear"></div>
<h1 style="margin-top: 150px;">jQuery j360 Plugin Demo</h1>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#product').j360();
});
</script>
<center>
<div id="product" style="width: 1920px; height: 1080px; overflow: hidden;">
<img src="v/1.png" />
<img src="v/2.png" />
<img src="v/3.png" />
<img src="v/4.png" />
<img src="v/5.png" />
</div>
</center>
</body>
</html>
The needed pictures are received on demand from a server, so I have to create this code on demand after receiving the pictures. I use therefore document.write commands - I know they are not best practice, but usually it works ... Anyway this is the code I use - basically the same (even when I'm debugging I can't find a difference in the created HTML to the "original" HTML)
So basically it's like that:
<button id="click1" onclick="myFunction()">click me</button>
<script>
function myFunction() {
document.writeln('<html>');
document.writeln('<head>');
document.writeln('<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">');
document.writeln('<title>jQuery j360 Plugin Demo</title>');
document.write('<scr');
document.write('ipt src="js/jquery-1.4.4.min.js"></scr');
document.write('ipt>');
document.write('<scr');
document.write('ipt type="text/javascr');
document.write('ipt" src="js/j360.js" ></scr');
document.writeln('ipt>');
document.writeln('</head>');
document.writeln('<body>');
document.writeln('<div class="jquery-script-clear"></div>');
document.write('<scr');
document.writeln('ipt type="text/javascript">');
document.write(' jQuery(document).ready(func');
document.writeln('tion() {');
document.write(" jQuery('");
document.write('#');
document.writeln("product').j360();");
document.writeln(' });');
document.write('</scr');
document.writeln('ipt>');
document.writeln('<center>');
document.writeln('<div id="product" style="width: 960px; height: 540px; overflow: hidden;">');
document.write('<img src="images/01.jpg" />');
document.write('<img src="images/02.jpg" />');
document.write('<img src="images/03.jpg" />');
document.writeln('</div>');
document.writeln('</center>');
document.writeln('</body>');
document.writeln('</html>');
}
</script>
The created HTML shows the picture but the jQuery plugin is not working. The JS are the same.
Thank for your help!
document.write overwrites any code you have.
Example:
function overwrite() {
document.write("Oops, I've overwritten the code!");
}
<!doctype html>
<html>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<button onclick="overwrite()">Click me!</button>
</body>
</html>
I am trying to make a button which when held down should change the picture next to it and then when you are not holding down on the button it will be on the original image. Now it comes up with the button and the image and knows that the picture of the button is a button but doesn't change the image.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
var button=document.images["button"];
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg";
return true;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="return handleMDown()" onmouseup="return handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="return handleMDown()"
onmouseup="return handleMUp"></a>
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
So here's the thing:
First of all, as mentioned by Petr Felzmann
syntax error: missing variable name: var =document.images["goo.gl/jjOUxT"]
Second of all, in your onmousedown & onmouseup events you can call the function by going handleMDown(); or handleMUp(); instead of your return handleMDown().
Last but not least, I've changed the images around a bit, this is just so I could test it properly, but from what I understood this is what you basically wanted:
HTML
<body>
<h1>Click in button</h1>
<a href="#"onmousedown="handleMDown();" onmouseup="handleMUp();">
<!-- Changed the onmousedown & onmouseup to handleMDown(); or handleMUp(); accordingly -->
<img id="button" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown();" onmouseup="handleMUp();"></a>
<!-- Changed the onmousedown & onmouseup to handelMDown(); or handleMUp(); accordingly -->
<img id="imagechange" src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" width="220" height=" 220" alt="image">
</body>
Javascript
function handleMDown() {
document.getElementById("imagechange").src="http://www.veryst.com/_Images/Material%20Testing%20--%20Modeling%20Services/Small%20punch%201.png";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="http://doha.biz/wp-content/uploads/awpcp/1276329896_0.jpg" ;
return true;
}
Don't forget to change the images back in the Javascript as well as in the HTML
Hope this helps!
you should put script tag in before close body tag :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h1>Click in button</h1>
<a href="#" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220" border="0" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp">
</a>
<img id="imagechange" src="green.jpg" width="220" height=" 220" alt="image">
<script>
var button= document.images["button"];
var e =document.images["http://goo.gl/jjOUxT"]
function handleMDown()
{document.getElementById("imagechange").src="red.jpg";
return true
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
return true;
}
</script>
</body>
</html>
You tried too much, you can do it much simpler. I stripped it down to the bare minimum: changing the images on the right of the big red button. I stripped the link, too, just add it back if you need it.
<!DOCTYPE html>
<html>
<head>
<title>Joel's Button</title>
<script>
function handleMDown()
{
document.getElementById("imagechange").src="red.jpg";
}
function handleMUp()
{
document.getElementById("imagechange").src="green.jpg" ;
}
</script>
</head>
<body>
<h1>Click in button</h1>
<img id="button" src="http://goo.gl/VqDdz0" width="220" height="220"
border="0" alt="javascript button" onmousedown="handleMDown()"
onmouseup="handleMUp()">
<img id="imagechange" src="green.jpg"width="220" height=" 220" alt="image">
</body>
</html>
The event-handler (the onthingy attributes if you excuse my simplifying) do not make use of any return of the functions they call, they just call them. If you want to call functions (function fun(){...}) you need to add () at the end of the function name, you forgot that in one places.
you can use onmousedown and onmouseup to handle these events
document.getElementById('red').onmousedown = function () {
document.getElementById('red').style.backgroundColor = 'red';
};
document.getElementById('red').onmouseup = function () {
document.getElementById('red').style.backgroundColor = 'blue';
};
http://jsfiddle.net/kdyr8owk/
Change your HTML code to:
<img id="button" src="http://goo.gl/VqDdz0" style="width: 220px; height: 220px; border: 0;" alt="javascript button" onmousedown="handleMDown()" onmouseup="handleMUp()">
<img id="imagechange" src="put your NOT holding button down source here" alt="image" style="width: 220px; height: 220px;">
Note that I changed your HTML code to match today's standard of using CSS to style elements.
Change your JavaScript code to:
function handleMDown() {
document.getElementById("imagechange").src="put your holding button down source here";
}
function handleMUp()
{
document.getElementById("imagechange").src="put your NOT holding button down source here";
}
Check out fiddle here.
I want to pass a variable which holds an img src to another page using javascript onClick() function. How can I do it either by id or by name tag.
Here's What I'm looking for:
Get the img src variable by onclick() from home.html & pass to & document.write() to img.html using a location.href = '/image'; in my function()
Thanks in advance.
function
<script type="text/javascript">
function img(id)
{
this.id = id;
var i = document.getElementById("image").src;
var j = new Image();
j.src = i;
document.body.appendChild(j);
document.write('"<img src="' + j + '"' + '/>');
}
</script>
home.html
<div class="container">
<ul class="thumbnails">
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="abc" name="a">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="xyz" name="b">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
<li class="span3">
<img src="../img/google-app-engine.gif" class="thumbnail" id="zzz" name="c">
<img data-src="holder.js/300x200" alt="">
<button class="btn btn-inverse" type="button" onclick="img();">Share</button>
</li>
</ul>
</div>
The Page I want to pass the img src value to is
img.html
<div class="container">
<div id="image" name="image">
<img src="" id="image" name="image"/>
</div>
</div>
OLD school way
i don't know exactly but i think this is also supported by the ie6;
i only added the necessary code
home.html
<html>
<head>
<title>thumbs</title>
<script>
function sendimg(a){
window.location.href='b.html#id='+a.id+'&src='+a.src;
}
</script>
</head>
<body>
<img src="imgs/img1.jpg" id="img1" onClick="sendimg(this);">
<img src="imgs/img2.jpg" id="img2" onClick="sendimg(this);">
<img src="imgs/img3.jpg" id="img3" onClick="sendimg(this);">
</body>
</html>
img.html
<html>
<head>
<title>img</title>
<script>
function getimg(){
var a=window.location.href.split('#')[1].split('&'),
id=a[0].split('=')[1],
src=a[1].split('=')[1],
img=document.images[0];
img.id=id;
img.src=src;
}
</script>
</head>
<body onLoad="getimg()">
<img src="ablankimage.gif">
</body>
</html>
now give me some seconds and i write the modern way.
Modern way
.. so this example has less support but can do alot more.
i also wrote some similar things in a different way and added some special modern features you can look after as you said your new to javascript.
home.html
<html>
<head>
<title>thumbs</title>
<script>
(function(W){
function init(){
W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
}
function sendimg(e){
var a=e.target;
if(a.parentNode.id=='thumbs'){
W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
W.location.href="img.html";
}
}
W.addEventListener('load',init,false)
})(window)
</script>
</head>
<body>
<div id="thumbs">
<img src="imgs/img1.jpg" id="img1">
<img src="imgs/img2.jpg" id="img2">
<img src="imgs/img3.jpg" id="img3">
</div>
</body>
</html>
img.html
<html>
<head>
<title>img</title>
<script>
window.onload=function(){
var img=document.createElement('img');
var info=JSON.parse(window.localStorage['imginfo']);
delete window.localStorage['imginfo'];
img.src=info.src;
img.id=info.id;
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
if you wan't me to explain something morejust ask ;)
there can be a way to make this Morden way to walk on all images which are in one table of the database?i used to try that but it's used only on the first image.then i tried to put that morden way in php pages.
here's my php pages:
*home.php:
<?php
$bdd = new PDO('mysql:host=127.0.0.1;dbname=imagetest', 'root', '');
?>
<html>
<head>
<title>thumbs</title>
</head>
<body>
<div >
<?php
$req = $bdd->query("SELECT * FROM images ORDER BY idimage DESC ");
while ($donnees = $req->fetch()):
?>
<div id="thumbs"><?php echo ('<img style="width:180px;height:180px;margin-left:40%;" src = "'.$donnees['lien'].'">');?> </div>
<script>
(function(W){
function init(){
W.document.getElementById('thumbs').addEventListener('click',sendimg,false);
}
function sendimg(e){
var a=e.target;
if(a.parentNode.id=='thumbs'){
W.localStorage['imginfo']=JSON.stringify({src:a.src,id:a.id});
W.location.href="img.php";
}
}
W.addEventListener('load',init,false)
})(window)
</script>
<?php endwhile; ?>
</div>
<body>
</body>
</html>
*img.php
<!DOCTYPE html>
<html>
<head>
<title>img</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width-device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./style.css"/>
<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/>
<style type="text/css">
img{height: 300px;width: 400px;}
</style>
<script>
window.onload=function(){
var img=document.createElement('img');
var info=JSON.parse(window.localStorage['imginfo']);
delete window.localStorage['imginfo'];
img.src=info.src;
img.id=info.id;
document.body.appendChild(img);
}
</script>
</head>
<body>
</body>
</html>
This would easily be done with Ajax + PHP + jQuery
JQUERY
var link = $("img").attr("src");
$.ajax{
url: "img.php",
type: "POST",
data: {"img":link},
success: function(e){
// Whatever you want
}
}
PHP
<?php
if (isset($_POST['img'])){
$link = $_POST['img']
}
// Whatever you want to do with the variable $link
?>
I don't know if this is going to solve your problem, hope it does.
I'm trying to make web app that will allow user to drag div's in iframe element.
This is my current code in index.html :
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
function onDrag(event){
event.dataTransfer.setData('Text', 'Some content');
}
</script>
<div id="items">
<ul>
<li><div draggable="true" ondrag="onDrag(event)">Content1</div></li>
<li><div draggable="true" ondrag="onDrag(event)">Content2</div></li>
</ul>
</div>
<iframe id="box" src="box.html">
</iframe>
And here is my code from box.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script>
function onDrop(event){
event.target.innerHTML += event.dataTransfer.getData('Text');
alert('Ok!');
}
function onDragOver(ev){
ev.preventDefault();
}
</script>
</head>
<body ondragover="onDragOver(event)" ondrop="onDrop(event)">
</body>
</html>
Drag works, and I even get that alert from onDrop function, but the event.dataTransfer.getData('Text') is returning empty string, and I don't know why.
Thanks in advance
You should set drag data in the dragstart event, not the drag event: http://jsfiddle.net/SVtzK/1/.
I'm a newbee in Javascript.
The error in the following code is that the alert message is displayed as soon as the page loads. Please help me overcome this error. And when I hit the submit button, the alert isn't displayed but rather the next link is opened.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Delete Book</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/default.css" />
</head>
<body id="index_page">
<div id="wrapper">
<div id="header">
<h1 align="left">Library</h1>
</div>
<ul id="navigation">
<li id="index">FAQ</li>
</ul>
<div id="content">
<div id="main_content">
<h2>Delete book</h2>
<h4>Enter details of the book</h4>
<FORM action="del_book_action.php" method="post" >
<TABLE WIDTH="70%" >
<TR>
<TH width="60%">Enter book ID:</TH>
<TD width="50%"><INPUT TYPE="text" name="id" id="book_id"></TD>
</tr>
<TR>
<TH></TH>
<TD width="50%"><INPUT TYPE="submit" Value="Submit" onclick="validate_f()"></TD>
</tr>
</TABLE>
</FORM>
</div>
<p id="footer">#AntonyAjay,2012</p>
</div>
<script language="javascript">
window.onload=function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
}
}
</script>
</body>
</html>
You're running the function on page load. Change this:
window.onload=function validate_f()
to:
function validate_f()
See if changing isNaN(x) to isNaN(y) fixes things.
Remove the windows on load the intention of the code is to validate upon submit. What is happening is that the function is being called upon page load
You pass a reference to a function to the window.onload and not the actual call.
<script>
window.onload = function(){
alert('test');
}
</script>
It is because you are calling the function onclick. Make two changes.Don't use the function on load. Use below html change and script
<INPUT TYPE="submit" Value="Submit" onclick="return validate_f()">
function validate_f()
{
var y=document.getElementById("book_id").value;
if(y==""||isNaN(x))
{
alert("Book Id should be numeric");
return false;
}
}