Onmouseover OnMouseout javascript - javascript

I wrote a script which changes the source of an image upon mouse over the image,
at first it worked, but after adding a second image which uses the same code both stopped working.
The issue I am experiencing is that the image does not change on mouse over as it should. It looks as if the image is not found – however I am really sure the images' sources point to the right path.
I have asked for other opinions as well and I cannot see what I am doing wrong. I would really appreciate your help or any input on this.
Below is the code I am using.
<html>
<head>
<script type="text/javascript">
var images= new Array();
images[0] = "Benjamin/Untitled-3.png";
images[1] = "Benjamin/Untitled-4.png";
images[2] = "Benjamin/Update.png";
images[3] = "Benjamin/Update2.png";
function Change()
{
document.getElementById("image").src = images[1];
}
function GoBack()
{
document.getElementById("image").src = images[0];
}
function GobackAgain()
{
document.GetElementById("Update").src = images[2];
}
function ChangeAgain()
{
document.getElementById("Update").src = images[3];
}
</script>
<style type="text/css">
body
{
background-color:#1c1a1a;
}
</style>
<div align="center">
<img src="Untitled-2.png" width="325" height="191">
</div>
</head>
<body>
<img onmouseover="Change()"
onmouseout="GoBack()"
id="image"
STYLE="position:absolute; TOP:35%; LEFT:10%; WIDTH:204px; HEIGHT:278px"
src="Untitled-3.png">
<img onmouseover="ChangeAgain()"
onmouseout="GoBackAgain()"
id="Update"
STYLE="position:absolute; TOP:35%; LEFT:50%; WIDTH:204px; HEIGHT:278px"
src="Update.png">
</body>
</html>

Rename GobackAgain to GoBackAgain and replace GetElementById with getElementById.

Here is one problems:
function GobackAgain()
{
document.GetElementById("Update").src = images[2];
}
You have GetElementById when it should be getElementById

Related

How can I link image to another page?

I am currently working on my school project website and I am really having a hard time coding.
So in my website I made an image slider and I wanted the images to be linked to another page, like if the user clicked the image they will be redirected to another page that contains information regarding the image they clicked. I also wanted a hover text when the mouse is pointed on the image that shows the title of it.
I tried to search and to watch videos on how to link images but nothing works.
Here's my code:
<script type="text/javascript">
<!-->
var image1=new Image()
image1.src="e.jpg"
var image2=new Image()
image2.src="g.jpg"
var image3=new Image()
image3.src="h.jpg"
//-->
</script>
<style type="text/css">
#gallery {
width: 100%;
height: 100%;
}
#gallery img {
width: 55%;
}
</style>
<DOCTYPE!html>
<html>
<body>
<center>
<div id="gallery">
<img src="e.jpg" name="slide" alt="Track race">
<script type="text/javascript">
<!--
var step=1
function slideit(){
document.images.slide.src=eval("image"+step+".src")
if(step<3)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</div>
</center>
</body>
</html>
onclick on a image to navigate to another page using Javascript
3rd best answer:
I'd set up your HTML like so:
<img src="../images/bottle.jpg" alt="bottle" class="thumbnails" id="bottle" />
Then use the following code:
<script>
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++) {
var image = images[i];
image.onclick = function(event) {
window.location.href = this.id + '.html';
};
}
That assigns an onclick event handler to every image on the page (this may not be what you want, you can limit it further if necessary) that changes the current page to the value of the images id attribute plus the .html extension. It's essentially the pure Javascript implementation of #JanPöschko's jQuery answer.

Multiple image rollover in javascript with for loop

Please help me. I want to do the below activity in javascript programming with the help of "for loop".
Suppose there are five images on the web page. When I rollover the 1st image, the text should display "it's a first image". When I rollover the 2nd image, the text should display "it's a second image". When I rollover the 3rd image, the text should display it's a third image.
I have tried and it's successful but it's manual. I am new in Javascript programming..
<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<link rel="stylesheet" href="style_latest.css" type="text/css">
<title>MATHERAN TRIP</title>
<style>
#displayText
{
width:413px;
height:auto;
background-color:#666666;
color:white;
}
#displayText1
{
padding-left:5px;
}
</style>
</head>
<body>
<img src="images/img1.jpg" id="img1" onmouseover="clickEvent1()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img2.jpg" id="img2" onmouseover="clickEvent2()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img3.jpg" id="img3" onmouseover="clickEvent3()" onmouseout="imgRollout()" width="100" height="100">
<img src="images/img4.jpg" id="img4" onmouseover="clickEvent4()" onmouseout="imgRollout()" width="100" height="100"><br/>
<div id="displayText">
<span id="displayText1"></span>
</div>
<script>
var myData=new Array("Hi, How r u?", "Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up? Hey, whats up?", "Hello, whats going on?", "Hi friends")
document.getElementById("displayText").style.visibility='hidden';
function clickEvent1()
{
document.getElementById("displayText1").innerHTML=myData[0];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent2()
{
document.getElementById("displayText1").innerHTML=myData[1];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent3()
{
document.getElementById("displayText1").innerHTML=myData[2];
document.getElementById("displayText").style.visibility='visible';
}
function clickEvent4()
{
document.getElementById("displayText1").innerHTML=myData[3];
document.getElementById("displayText").style.visibility='visible';
}
function imgRollout()
{
document.getElementById("displayText").style.visibility='hidden';
}
</script>
</body>
</html>
I would recommend you don't include inline event attributes at each element. But I would consider including an inline html5 data- attribute with the message associated with the elements:
<img src="images/img1.jpg" data-msg="Hi, How r u?" width="100" height="100">
<!-- etc -->
Then you can bind the same rollover functions to each element using a loop as follows:
function doMouseOver(e) {
document.getElementById("displayText1").innerHTML =
e.target.getAttribute("data-msg");
document.getElementById("displayText").style.visibility='visible';
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
var imgs = document.getElementsByTagName("img"),
i;
for (i = 0; i < imgs.length; i++) {
imgs[i].addEventListener("mouseover", doMouseOver);
imgs[i].addEventListener("mouseout", doMouseOut);
}
Within the doMouseOver() function, the e argument is the event object, and thus e.target gives you a reference to the element the event happened to - so then you can retrieve the particular data-msg value for that element to display it.
Demo: http://jsfiddle.net/3c7Rb/
Having said that, you don't need the loop either. You can bind the functions directly to the document, and then within the mouse over handler you simply test whether the target element has the msg-data attribute. If it does, display it, otherwise do nothing:
function doMouseOver(e) {
var msg = e.target.getAttribute("data-msg");
if (msg) {
document.getElementById("displayText1").innerHTML= msg;
document.getElementById("displayText").style.visibility='visible';
}
}
function doMouseOut() {
document.getElementById("displayText").style.visibility='hidden';
}
document.addEventListener("mouseover", doMouseOver);
document.addEventListener("mouseout", doMouseOut);
Demo: http://jsfiddle.net/3c7Rb/1/

Javascript change width of image onclick

I'm a complete noob when it comes to javascript. Would there be anyway to change an image after it is clicked, some way to trigger a js function to change the css. It would have to be triggered by an event and something other than onclick, onfocus probably.
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src='nope.jpg' id='pic' onclick="mouseOver()"></img>
<script type='text/javascript'>
function mouseOver() {
document.getElementById('pic').style.width="400px";
document.getElementById('pic').style.height="400px";
}
</script>
try this...
function mouseOver() {
document.getElementById('image').style.height = "400px";
}
First i edited the question , because the function was not defined correctly .
Second :
to access the height property of any element , you should use style.height , and should add "px" to the value.
please spend more time searching for answers , instead of posting a new question.
Change the JS to this:
var image = document.getElementById('image');
function mouseOver() {
image.style.height="600px";
}
image.onclick = mouseOver;
Setting values you can use directly style attribute, but remember that asking for them is a greater problem:
Please refer to this one:
Get a CSS value with JavaScript
This should work
<style>
#pic {
width:100px;
height:100px;
}
</style>
</head>
<body>
<img
width="100"
onmouseOver="this.width=400; this.height=400"
onclick="this.width=100"
alt="RESIZE IMAGE"
id='pic'
src='nope.jpg'
/>
just copy and edit the image tag code as needed

Get image src from a image in a slideshow

I've been looking around much today and spend a few hours trying to get something done. For a client I am creating a slideshow with a lightbox when clicked on an image. The slideshow and lightbox both work, but I don't get the right image in the lightbox yet.
This is the code that loads the slideshow and when clicked on an image opens the lightbox.
(The images for the slideshow get loaded by a php script and turned into a Javascript array)
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/"+galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
}
</script>
<div style="width: 170px; height: 160px">
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style. display='block'">
<img id="slideshow" src="" />
</a>
<div id="light" class="white_content">
<img id="lightImg" src="" />
<script>
var image = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", image);
</script>
I now try to create a variable named "image"and let this contain the src of the current image in the slideshow. So I can load this to the image in the lightbox.
Hopefully some one can give me some usefull tips. I am pretty new in the Javascript language.
The script for the slideshow came from: http://www.javascriptkit.com/javatutors/externalphp2.shtml
Regards Koen.
These days there really is no excuse for using obtrusive Javascript (Stuff inside your HTML attributes, ideally it should be in an external file. http://en.wikipedia.org/wiki/Unobtrusive_JavaScript).
I have done you the favour of cleaning up your code a bit, and changed it where you seemed to be going wrong. As DotNetter has already pointed out it would be sensible to use jQuery in this instance, as it really does simplify things. However, I'm going to assume that for some reason you want it in plain js. Below is a simplification of the code that you posted with the correct change.
<style type="text/css">
.wrapper {
width: 170px;
height: 160px;
}
</style>
<script type="text/javascript">
var curimg=0;
function rotateimages(){
document.getElementById("slideshow").setAttribute("src", "images/" + galleryarray[curimg]);
curimg=(curimg<galleryarray.length-1)? curimg+1 : 0;
}
window.onload = function(){
setInterval("rotateimages()", 1000);
document.getElementById("slideshow").onclick = function () {
var imageSrc = document.getElementById("slideshow").src;
document.getElementById("lightImg").setAttribute("src", imageSrc);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
}
}
</script>
<div class='wrapper'>
<img id="slideshow" src="" />
<div id="light" class="white_content">
<img id="lightImg" src="" />
</div>
</div>
Before, you were getting the src of the current image when the page loaded, you need to be getting the src of the image when the user clicks on the

How do I buffer an image, show it when I want to, and be able to move it

I looked forever for how to do this but can't figure out how. The best I have done is made an image with HTML. I tried to edit the image settings after it was made like how you use document.getElementById() to change text, but I couldn't get it to work.
my code so far...
function run() {
x++;
y++;
if (x==10 || x==30) {
exmp.visibility = show //doesn't work
}
if (x==20 || x==40) {
exmp.visibility = hidden //doesn't work
}
if (x==50) {
x=0
y=0
}
document.getElementById("exmp").style = "position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px" //doesn't work
}
x=0
y=0
document.write("<div ID=\"exmp\"; STYLE=\"position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px\"> <IMG SRC=\"exmp.png\"; alt=\"image\"> </div>");
setInterval(run,33);
I finally found a great java script tutorial on moving images and making them display when I want to. (http://www.openjs.com/tutorials/advanced_tutorial/moving.php)
my working code:
<html>
<head>
<title>Image Mover</title>
<style>
DIV.movable { position:absolute; }
</style>
</head>
<body>
<div ID="exmp"; class = "movable";>
<IMG SRC="exmp.png"; alt="image"/>
</div>
<script type="text/javascript">
document.getElementById("exmp").style.visibility='hidden';
function run() {
pos++;
if (pos==10 || pos==30) {
document.getElementById("exmp").style.visibility='visible';
}
if (pos==20 || pos==40) {
document.getElementById("exmp").style.visibility='hidden';
}
if (pos==40) {
pos=0;
}
//document.getElementById("exmp").style = "position:absolute; TOP:"
// +pos+"px; LEFT:"+pos+"px; WIDTH:239px; HEIGHT:74px";
document.getElementById("exmp").style.left = pos+"px";
document.getElementById("exmp").style.top = pos+"px";
//STYLE="position:absolute; TOP:0px; LEFT:0px; WIDTH:239px; HEIGHT:74px"
}
pos=0;
setInterval(run,33);
</script>
</body>
</html>
Several ways to do this.
You can cache the image using JavaScript without displaying it:
var img = new Image();
img.src = "http://PATH_TO_IMAGE";
When needed, you can append this image element to the page.
You can add a img tag to the page, but set the image to invisible (visibility: hidden), or make it very small, like 1px x 1px. The browser will load the image, draw the image slot, but it is transparent. To use this method, you need to make sure you put this image somewhere user wont notice it.

Categories