I am trying to have the image disappear on mouse out. i have the image appear on mouse over but i want it to be hidden on mouse out. i have my current code below any help?
var fullpic = new Array(4);
for (var i=0;i<fullpic.length;i++)
fullpic[i] = new Image(515,385);
fullpic[0].src = "images/FrenchQuarter.jpg";
fullpic[1].src = "images/GoldenGateBridge.jpg";
fullpic[2].src = "images/NazarethBay.jpg";
fullpic[3].src = "images/TheAlamo.jpg";
function displayFull(i){
document.getElementById("img-cover").src=fullpic[i].src;
}
/*This is the function i have to make the image hidden */
function hideFull(i){
document.getElementById("img-cover").css.visibility=hidden;
}
var fullbanner = new Array(4);
for (var i=0;i<fullbanner.length;i++)
fullbanner[i] = new Image(468,60);
fullbanner[0].src = "images/banner1.gif";
fullbanner[1].src = "images/banner2.gif";
fullbanner[2].src = "images/banner3.gif";
fullbanner[3].src = "images/banner4.gif";
var n = 0;
window.addEventListener("load",showFull,false);
function showFull(){
setInterval("showPic()",3000);
}
function showPic(){
document.getElementById("banner").src=fullbanner[n].src;
n++;
if(n>3)
n=0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "function.js"></script>
</head>
<body>
<div id = "banner-wrapper">
<img id = "banner" src = "images/banner1.gif">
</div>
<div id = "thumbs">
<img class = "thumb-img" src = "images/FrenchQuarter_small.jpg" onmouseover="displayFull(0)" onmouseout= "hideFull(0)">
<img class = "thumb-img" src = "images/GoldenGateBridge_small.jpg" onmouseover="displayFull(1)" onmouseout= "hideFull(1)">
<img class = "thumb-img" src = "images/NazarethBay_small.jpg" onmouseover="displayFull(2)" onmouseout= "hideFull(2)">
<img class = "thumb-img" src = "images/TheAlamo_small.jpg" onmouseover="displayFull(3)" onmouseout= "hideFull(3)">
</div>
<div id = "main-img">
<img id = "img-cover" src = "">
</div>
</body>
</html>
Check the error console. You'll see:
ERROR: {
"message": "ReferenceError: hidden is not defined",
"filename": "http://stacksnippets.net/js",
"lineno": 61,
"colno": 5
}
hidden is not defined
Because it's supposed to be a string. Put the quotes..
function hideFull(i){
document.getElementById("img-cover").style.visibility='hidden';
}
Related
I'm trying to build something that would resemble a slide show, where you have an image and when you click on it, it is replaced by another randomly in my series of images. I first tried with simple html, but of course the images don't switch randomly. So I did my research and found that it could be done with an array in Javascript. I just don't really know a lot about javascript…
This is what I could find but it doesn't work, I'm sure there is a stupid mistake in there that I can't see:
this is my javascript
function pickimg2() {
var imagenumber = 2 ;
var randomnumber = Math.random();
var rand1 = Math.round((imagenumber-1) * randomnumber) + 1;
myImages1 = new Array();
myImages1[1] = "img_01.gif";
myImages1[2] = "img_02.gif";
myImages1[3] = "img_03.gif";
myImages1[4] = "img_04.gif";
myImages1[5] = "img_05.gif";
myImages1[6] = "img_06.gif";
myImages1[7] = "img_07.gif";
myImages1[8] = "img_08.gif";
myImages1[9] = "img_09.gif";
var image = images[rand1];
document.randimg.src = "myImages1";
}
there is my html
<!DOCTYPE html>
<html>
<head>
<title>mur</title>
<link rel="stylesheet" href="style.css">
<link rel="JavaScript" href="script.js">
</head>
<body onLoad="pickimg2">
<div class="fenetre">
<img src="img_01.gif" name="randimg" border=0>
</div>
</body>
</html>
If someone has another solution I'm open to it!
Fix your script link like RamenChef mentioned:
<script type="text/javascript" src="script.js"></script>
Here's the updated code, check console.log to see the different image urls getting requested.
var myImages1 = new Array();
myImages1.push("img_01.gif");
myImages1.push("img_02.gif");
myImages1.push("img_03.gif");
myImages1.push("img_04.gif");
myImages1.push("img_05.gif");
myImages1.push("img_06.gif");
myImages1.push("img_07.gif");
myImages1.push("img_08.gif");
myImages1.push("img_09.gif");
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function pickimg2() {
document.randimg.src = myImages1[getRandomInt(0, myImages1.length - 1)];
}
<div class="fenetre">
<a href="#" onClick="pickimg2();return false;">
<img src="img_01.gif" name="randimg" border=0>
</a>
</div>
this code bellow is working. I hope it's what you were asking for
var images = [
"http://img1.science-et-vie.com/var/scienceetvie/storage/images/galerie/deepsea-challenge-le-film-de-james-cameron-livre-des-images-inedites-des-grands-fonds-marins-5165/19818-1-fre-FR/Deepsea-challenge-le-film-de-James-Cameron-livre-des-images-inedites-des-grands-fonds-marins_square500x500.jpg",
"http://static.mensup.fr/photos/145240/carre-premieres-images-officielles-pour-assassin-s-creed-rogue.jpg",
"http://www.pnas.org/site/misc/images/16-01910.500.jpg" ];
init();
function random_image(images) {
var random = randomize(images);
while(images[random] === document.getElementById("image").src){
random = randomize(images)
}
document.getElementById("image").src = images[random].toString();
}
function randomize(array){
return Math.floor((Math.random() * (array.length)));
}
function init() {
document.getElementById("image").addEventListener("click", function(){
random_image(images);
});
random_image(images);
}
<!DOCTYPE html>
<html>
<head>
<title>Bonjour</title>
</head>
<body >
<div class="fenetre">
<img id="image" src="" name="randimg" >
</div>
</body>
</html>
I need your help :-)
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Der Einmaleins - Trainer</title>
<link href = "style.css" type = "text/css" rel = "stylesheet">
<!--<script src = "script1m1.js"></script>-->
</head>
<body>
<h1>Der Einmaleins - Trainer</h1>
<button type="button" onclick = "start();">Start</button>
<!--<button type = "button" onclick = "fertig();">Fertig!</button>-->
<input id = "erginput" type = "number" >
<!--<label id = "rn1"></label>
<label id = "multiplication"></label>
<label id = "rn2"></label>
<br>-->
<label id = "feedback"></label>
</body>
<script>
function start(){
var ergebnis = document.getElementById("erginput").innerHTML;
document.getElementById("feedback").innerHTML = ergebnis;
}
</script>
</html>
The problem: When I set a number in the number input and click on start, the number is not shown.
Thanks in advance !
Ji W
input elements don't have innerHTML, they have value, so:
function start(){
var ergebnis = document.getElementById("erginput").value;
// Note -------------------------------------------^^^^^
document.getElementById("feedback").innerHTML = ergebnis;
}
(label elements do have innerHTML, which is why there's only one change above.)
I'm trying to dynamically set the content of a popup.
Here is a first HTML page where everything is defined statically :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
<ul class='links-list'>
<li><a target='_blank' href='siteURL'><i class='myButton'>TEXT</i></a></li>
<li><a target='_blank' href='twitterURL'><i class='myButton'>TEXT</i></a></li>
</ul>
</div>
</body>
</html>
Now I need to dynamically set my buttons, so I've removed everything which will be dynamically created :
<html>
<head>
<meta charset='utf-8'>
<link href='css/font-awesome.css' rel='stylesheet'>
<link href='css/myStyle.css' rel='stylesheet'>
</head>
<body>
<div id="data">
</div>
<script type="text/javascript" src="script.js">
</script>
</body>
</html>
My content script "script.js" receive data (array of links) and have to create buttons in my HTML document :
self.port.on("liste", function(list)
{
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.class = 'links-list';
for (var i = 0; i < list.links.length; ++i)
{
var site = list.links[i];
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.class = "myButton";
link.text = site.text;
link.href = site.url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);
});
Issue is links created dynamically aren't using "myStyle.css", here is a comparaison :
Static vs dynamic load :
Could anyone help me resolving this? Thank you.
The correct way to give an item a class using javascript is - unintuitively enough - className, or setAttribute. So either of these will add the correct class:
button.className = 'myButton'
button.setAttribute('class', 'myButton')
Using just .class does not work in Javascript:
document.getElementById('a1').class = 'aClass';
document.getElementById('a2').className = 'aClass';
document.getElementById('a3').setAttribute('class', 'aClass');
.aClass { color: red; }
<pre id="a1">.class</pre>
<pre id="a2">.className</pre>
<pre id="a3">.setAttribute</pre>
Looks to me like the comment from CBroe is the answer. In your javascript you're putting the text into the link instead of your button. That means that the button will essentially be invisible. That's why it looks different from your hard-coded example. Try this javascript instead.
var div = document.getElementById('data'); // Get <div id="data">
var ul = document.createElement('ul'); // Create <ul class='links-list'>
ul.className = 'links-list';
for (var i = 0; i < 4; ++i){
var url = i;
var li = document.createElement('li'); // Create <li>
var link = document.createElement('a'); // Create <a>
var button = document.createElement('i'); // Create <i>
button.className = "myButton";
button.innerHTML = 'text'+i;
link.text = "ab ";
link.href = url;
link.target = '_blank';
link.appendChild(button);
li.appendChild(link);
ul.appendChild(li);
}
div.appendChild(ul);
I have a SVG graphic embedded via object tag.
<!DOCTYPE html>
<html>
<head>
<title>myTitle</title>
<script type="text/javascript" src="script.js"></script>
<link href="box.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id ="objectcontainer">
<div id="displaybox" style="display: none;"></div>
<object id = "mainSVG" type="image/svg+xml" data="map_complete.svg">
<img id="svgPic" src="map_complete.svg" alt="Browser fail"/>
</object>
</div>
</body>
</html>
In the SVG is a link:
<a id="emerBtn" xlink:href="emergency.html" onmouseover="return playVideo()" target="_parent">
The mouse over event should trigger the following:
function playVideo(){
//not working, all the time null
var doc = document.parentNode;
var elem = document.parentElement;
var otherElem = document.documentElement.parentElement;
//working if triggered from index.html
var thediv = document.getElementById('displaybox');
if(wasViewed == false) //show only one time
{
if(thediv.style.display == "none"){
wasViewed = true;
thediv.style.display = "";
thediv.innerHTML = "<div id='videocontainer'><video autoplay controls style='display:block; margin-left:auto;" +
"margin-right:auto; margin-top:150px; margin-bottom:auto; width:600px'>" +
"<source src='video.mp4' type='video/mp4'>HMTL5-Video not supported!</video>" +
"</div><a href='#' onclick='return palyVideo();'>CLOSE WINDOW</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
} //close anyhow
else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
My problem is, that i cannot access the "displaybox" from the svg.
I tried .parentNode, .parentElement, document.documentElement.parentElement etc.
But all the time the parent element/node is null.
Does anyone know how to access the "outer" HTML elements from the object/svg?
An SVG inside an object creates a nested browsing context.
To access elements outside this child document, you need to access the parent document:
function playVideo() {
// ...
var parentDoc = window.parent.document;
var displayBox = parentDoc.getElementById('displaybox');
// ...
}
I wrote a webpage that displays a slideshow of different images that users can look through. However, I need to write a function so if they click on a URL that says
http://www.slideshow.com/image3
The slideshow will automatically show "Image 3" in the slideshow when the page is loaded. I have researched this for days, trying to use AJAX, ASP, and various jQuery and .js files, but nothing I have researched seems to fit my purpose. Is there a simpler way to do this with just JavaScript?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slideshow</title>
<script type="text/javascript">
//preloading all the images into a cache
//to add more slides, add extra variable declarations
var img1 = new Image()
img1.src = "img/1.jpg"
var img2 = new Image()
img2.src = "img/2.jpg"
var img3 = new Image()
img3.src = "img/3.jpg"
var img4 = new Image()
img4.src = "img/4.jpg"
var img5 = new Image()
img5.src = "img/5.jpg"
var img6 = new Image()
img6.src = "img/6.jpg"
var img7 = new Image()
img7.src = "img/7.jpg"
var img8 = new Image()
img8.src = "img/8.jpg"
var img9 = new Image()
img9.src = "img/9.jpg"
var imgNum = 1
var x = 0
var width
//function that cycles through different images
function slideshow()
{
if (!document.images)
return
if (imgNum < 9) // <-- If you add or subtract images in the slideshow, you need to change this number to the amount of
imgNum++ //images in the slideshow so it will loop correctly.
else
imgNum=1
document.images.slide.src=eval("img" + imgNum + ".src")
}
//function that crops the slideshow image to the screen size and centers it
function crop()
{
if (document.getElementById("slide").width > screen.width)
{
width = document.getElementById("slide").width
width = -1*((width - screen.width)/2)
document.getElementById("slide").style.marginLeft= width +"px"
document.getElementById("slide").style.marginRight= width + "px"
}
}
//function that evaluates a number passed to it and returns the corresponding image in /img
function imgSelect(x)
{
imgNum = x
document.images.slide.src=eval("img" + imgNum + ".src")
}
//function that hides or shows the menu
function hide(object)
{
if (object.style.display=="none")
object.style.display="block"
else
object.style.display="none"
}
//function that changes the menu text from "hide menu" to "show menu" and vice versa
function menuChange(object)
{
if (object.innerHTML=="hide menu")
object.innerHTML="show menu"
else
object.innerHTML="hide menu"
}
//function that allows a link to do both the hide(object) function and the menuChange(object) function with once click
function doBoth(object1, object2)
{
hide(object1)
menuChange(object2)
}
</script>
</head>
<body onload="crop()">
<center>
<div style="background-color:#87D300; padding:5px;">
<a id="button" href="javascript:doBoth(document.getElementById('menu'),document.getElementById('button'))" style="color:#FFFFFF">hide menu</a>
</div>
</center>
<img src="img/logo.png"/>
<div id="title">
<h1 style="position:relative; top:-31px; right:-133px">Slideshow</h1>
</div>
<div id="menu" class="margin">
<h2>Designs</h2>
<ul>
<li>Splash Page:1</li>
<li>Splash Page:2</li>
<li>Splash Page:3</li>
<li>Splash Page:4</li>
<li class="new">Book: 1</li>
<li>Book: 2</li>
<li>Book: Rollover</li>
<li>Book: Clicked</li>
<li>Book: Clicked, no Email</li>
</ul>
</div>
</br>
<center>
<div id="mySlides" style="width:screen.width; overflow:hidden;">
<img src="img/1.jpg" onclick="slideshow()" id="slide"/>
</div>
</center>
</body>
</html>
Use a URL hash instead:
http://www.slideshow.com#image3
The value will be document.location.hash, which you can use for read/write. Any other manipulation of the URL will cause a navigation event.