i'm new to javasript
and i have asimple code which worked fine in google chroome but the script din't fire with firefox
it's just two event on onmouseover and onmouseout and change images
<!DOCTYPE html>
<html>
<head>
<title> </title>
<script>
function over() {
image1.src = "13.JPG"
}
function out() {
image1.src = "19.JPG"
}
</script>
<style>
img {
height:200px; width:200px;
}
</style>
</head>
<body>
<img id="image1" onmouseover="over()" onmouseout="out()" />
</body>
</html>
and it's worked fine in google chroome but not in firefox and i want to know why , thanks.
Here's how to do this with javascript:
function over() {
document.getElementById('image1').src = "http://animalrescuetracy.org/wp-content/uploads/2014/07/playful-kitten-6683.jpg";
}
function out() {
document.getElementById('image1').src = "http://www.valleyvet.com/images/worming-your-kitten.png";
}
img {
height:200px; width:200px;
}
<img id="image1" src="" onmouseover="over()" onmouseout="out()"/>
Here's how to do it with css:
#image1{
content:url("http://www.valleyvet.com/images/worming-your-kitten.png");
height:200px; width:200px;
}
#image1:hover{
content:url("http://animalrescuetracy.org/wp-content/uploads/2014/07/playful-kitten-6683.jpg");
}
<img id="image1" src=""/>
Related
I try to drag the image and drop it on the target div. However instead of dropping the image itself only the image path is displayed.
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="DragAndDrop_2.css">
<script src="DragAndDrop_2.js" type="text/javascript"></script>
</head>
<body>
<img id="my-image" draggable="true" src="images/thumbUp.jpg" height="200">
<div id="target-box"> </div>
</body>
</html>
Stylesheet:
*{
margin:0px;
padding:0px;
}
#target-box {
width:600px;
height:600px;
border:1px solid black;
}
Javascript:
function initialFunction() {
picture = document.getElementById('my-image');
targetBox = document.getElementById('target-box');
picture.addEventListener('drag', drag, false);
targetBox.addEventListener('dragover', function(ev) { ev.preventDefault(); }, false);
targetBox.addEventListener('drop', drop, false);
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.outerHTML);
}
function drop(ev) {
var code = ev.dataTransfer.getData("Text");
targetBox.innerHTML = code;
}
window.addEventListener('load', initialFunction, false);
I heard about some issues with Drag and Drop operation in HTML5. I wonder if in this case it's a bug in API or perhaps I'm missing something.
I keep on getting ReferenceError: toggleExpand is not defined in console on firefox when I click the img
I am trying to get the image to enlarging, floating in center screen on click, no jquery, pure javascript, html, css.
HTML
<body>
<script type="text/javascript">
function toggleExpand(id){
var doc = document.getElementById(id);
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
<img id="img1" onclick="toggleExpand('img1');" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
</body>
This is my code used this can used this
<html>
<head>
<script>
function toggle(){
var doc = document.getElementById("divSection");
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<p class="button" onclick="toggle()">Show/hide</p>
</body>
</html>
First of, a property cannot contain a -
so change it to CamelCase zIndex or wrap in brackets ["z-index"]
also, strange no-one mentioned, no need to pass the ID! You already have the this reference to the clicked referring HTMLIMGElement,
so yes, use simply onclick="toggleExpand(this);" without the ID
Also I see you named your function TOGGLE... so let's toggle!
img[onclick]{vertical-align:top; cursor:pointer; }
<script>
function toggleExpand(el){
var io = el.tog ^= 1; // Store the toggle state
el.style.zIndex = io ? 1 : 0;
el.style.width = (io ? 256 : 128) +"px";
}
</script>
<img onclick="toggleExpand(this);" src="https://www.gravatar.com/avatar/6edc0ac8cd9f3e790389f3284eaaf9e9?s=32&d=identicon&r=PG" alt="image" style="width:128px; height:auto; z-index:0"/>
<img onclick="toggleExpand(this);" src="https://i.stack.imgur.com/1ZIkv.jpg?s=48&g=1" alt="image" style="width:128px; height:auto; z-index:0"/>
jsBin playground
change doc.style.z-index to doc.style['z-index'] and check
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<body>
<script type="text/javascript">
function toggleExpand(id) {
var doc = document.getElementById(id);
doc.style['z-index'] = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
<img id="img1" onclick="toggleExpand('img1');" src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Alexanderplatz_Stadtmodell_1.jpg/1920px-Alexanderplatz_Stadtmodell_1.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"
/>
</body>
</body>
</html>
Why you are passing your id as a function argument! why not use something like this-
<body>
<img id="img1" onclick="toggleExpand();" src="I:\Images\image.jpg" alt="image" style="width:128px; height:auto; cursor:pointer; z-index:0"/>
<script type="text/javascript">
function toggleExpand(){
var doc = document.getElementById('img1');
doc.style.z-index = "1";
doc.style.width = "512px";
doc.style.align = "center";
}
</script>
</body>
It is better to do in this way.
var doc = document.getElementById(id)
doc.addEventListener('click',toggleExpand);
I'm working on an application with modal overlays that appear within iFrames when the corresponding buttons are pressed. To close one of these modal overlays, the Cancel button is defined in the parent window this way:
Cancel
I'd like to replace this with a JavaScript function (let's call it onCancel() ) so I can reset some values if needed in addition to closing the overlay. What is the JavaScript equivalent to "#close"?
You can't close an iFrame, you either have to remove or hide it. The example below removes the iframe. If you just want to hide you can replace the last line (containing removeChild with this one frame.style.display="none"; You can then get it back by using this line frame.style.display="block";
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height: 100px;
width: 200px;
background-color: blue;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("iframe");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="iframe" src="/" width="200" height="100"></iframe>
<div class="top"></div>
</body>
<!DOCTYPE html>
<head>
<title>test</title>
<style type="text/css">
.top {
height:100px;
width:200px;
background-color:green;
}
</style>
<script type="text/javascript">
function removeIFrame() {
var frame = document.getElementById("target");
frame.parentNode.removeChild(frame);
}
</script>
</head>
<body>
<div class="top" onclick="removeIFrame();"></div>
<iframe id="target" src="http://www.disney.com" width="100" height="100"></iframe>
<div class="top"></div>
</body>
The approach that works for me is to define the following JavaScript function in the parent page:
function onCancel()
{
var myIFrame = document.getElementById("myIFrame");
var myForm = myIFrame.contentDocument.myForm;
var stuffWasChanged = myIFrame.contentDocument.stuffWasChanged;
if (stuffWasChanged == "true")
myForm.action = "reset.do";
myForm.submit();
location.href = '#';
}
Note that if the stuffWasChanged flag was not set to true, then no action is defined for the form in question, so the modal overlay simply goes away without any servlet method being called.
The following drag and drop JavaScript works in Firefox, but not in IE:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>t</title>
<style type="text/css">
.mover {
width:60px; height:4em; line-height:4em; margin:10px; padding:5px;
float:left; background:#ffff99; border:1px dotted #333333; text-align:center;
}
</style>
<script type="text/javascript">
function dragWord(dragEvent) {
dragEvent.dataTransfer.setData("text/html", dragEvent.target.textContent + "|" + dragEvent.target.parentNode.id);
}
function dropWord(dropEvent) {
var dropData = dropEvent.dataTransfer.getData("text/html"); var dropItems = dropData.split("|");
var prevElem = document.getElementById(dropItems[1]);
prevElem.getElementsByTagName("div")[0].textContent = dropEvent.target.textContent;
dropEvent.target.textContent = dropItems[0]; dropEvent.preventDefault();
}
</script>
</head>
<body>
<div><em>Move the words around to make a sentence.</em></div>
<form>
<div id="box1" ondragover="event.preventDefault()" ondrop="dropWord(event)">
<a href="#" class="mover" draggable="true" ondragstart="dragWord(event)" >page</a>
</div>
</form>
</html>
Does anyone have any clues as to why this does not work in IE? The problem is in the drag and drop function. I tried to replace the div with a href=# but that does not work.
I can make the button appear after 5 seconds. I'd like to be able to click the button and go to a different site (like google.com, for example). Help please?
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
window.clearTimeout(_t);
};
</script>
</head>
<body>
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</body>
</html>
Change this:
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
To:
<div id="buy_button_image"><img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png"></div>
Use an a tag:
Note that your clearTimeout does nothing. Take a look at the setTimeout() and clearTimeout() references.
<html>
<head>
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
};
</script>
</head>
<body>
<a href="http://www.pumaskills.com" id="buy_button_image">
<img style="border: medium none ;" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</a>
</body>
</html>
Try it out with this jsFiddle
Anchor tag?
<style type="text/css">
#buy_button_image { display: none; }
</style>
<script type="text/javascript">
window.onload = function()
{
var img = document.getElementById("buy_button_image");
var _t = function() {
img.style.display = "block";
};
window.setTimeout(_t, 5000);
window.clearTimeout(_t);
};
</script>
</head>
<body>
<img style="border: medium none ;" id="buy_button_image" src="http://www.pumaskills.com/images/redgetaccessnow-vip.png">
</body>
</html>