How to undo with onMouseOut with Javascript?

Question

I was trying to figure out an assignment where I am supposed to use Javascript to hover over three different images, which shows the alt of the text in a separate box. I've got that part, but now I am completely lost when I try to revert to the original text. In my example for the second two images, I am hard coding the text I want, so it's the end result I want, only I want to call the text inside the div with the id="image" instead. The first function is working in my javascript. I want to add that I am completely new to Javascript, so I don't know all the reserved words yet.

function upDate(element){
	document.getElementById('image').innerHTML = element.alt;
    }

	function unDo(preview){
	 document.getElementById('image').innerHTML = preview.alt;
	}

/*Name this external file gallery.css*/
body{
		margin: 2%;
		border: 1px solid black;
		background-color: #b3b3b3;
}
#image{
    line-height:150px;
		width: 575px;
    height: 200px;
		border:5px solid black;
		margin:0 auto;
    background-color: #8e68ff;
    background-image: url('');
    background-repeat: no-repeat;
    color:#FFFFFF;
    text-align: center;
    background-size: 100%;
    margin-bottom:25px;
    font-size: 150%;
}
.preview{
		width:10%;
		margin-left:17%;
    border: 10px solid black;
}
img{
		width:95%;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Photo Gallery</title>
	<link rel="stylesheet" href="gallery.css">
	<script src = "gallery.js"></script>
</head>
<body>
	
	<div id = "image">
		<p>Hover over an image below to display here.</p>
	</div>
	
	<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onMouseOver = "upDate(this)" onMouseout = "unDo()">
	
	<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onMouseOver = "upDate(this)" onMouseOut = "document.getElementById('image').innerHTML = 'Hover over an image below to display here.';">
	
	<!--onMouseOut, onMouseLeave are both functional-->
	<img class = "preview" alt = "Young Puppy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" onMouseOver = "upDate(this)" onMouseleave = "document.getElementById('image').innerHTML = 'Hover over an image below to display here.';">

</body>
</html>

mightyheptagon · Accepted Answer · 2016-02-24 20:11:52Z

2

I completely understand why are you feeling completely lost right now as you can't get any reference to the text Hover over an image below to display here. You can't retrieve it because you overwrite the content of image every time when upDate(element) { ... } is called.

I would suggest adding a variable in your JS file to store this piece of text, then you will be able to change the content of unDo by referring to this variable.

Since this is an assignment, I will try to leave some space for you to think of it so codes are hidden in my reply. However if you really can't figure it out, please see below for the code snippet.

function upDate(element) {
  document.getElementById('image').innerHTML = element.alt;
}

function unDo() {
  document.getElementById('image').innerHTML = defaultText;
}

var defaultText = 'Hover over an image below to display here.';

/*Name this external file gallery.css*/

body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}
#image {
  line-height: 150px;
  width: 575px;
  height: 200px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  background-image: url('');
  background-repeat: no-repeat;
  color: #FFFFFF;
  text-align: center;
  background-size: 100%;
  margin-bottom: 25px;
  font-size: 150%;
}
.preview {
  width: 10%;
  margin-left: 17%;
  border: 10px solid black;
}
img {
  width: 95%;
}

<div id="image">
  <p>
    Hover over an image below to display here.
  </p>
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onMouseOver="upDate(this)" onMouseout="unDo()">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onMouseOver="upDate(this)" onMouseOut="unDo()">

<!--onMouseOut, onMouseLeave are both functional-->
<img class="preview" alt="Young Puppy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" onMouseOver="upDate(this)" onMouseOut="unDo()">

udpate as IcePickle suggested, code snippet is now included in the answer.

edited Feb 24, 2016 at 20:11

answered Feb 24, 2016 at 19:24

mightyheptagon

1702 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Icepickle Over a year ago

add the code here, not only with a jsfiddle (temporary) link. We do have a code editor here

Icepickle Over a year ago

how about, adding some dummy code so you could add the jsfiddle?

mightyheptagon Over a year ago

the reason for not adding the code segment is that the author, claimed this is an assignment. it is important for a beginner to explore rather than referring to a code segment that was implemented by someone else. In addition, this is not a very difficult solution and I am sure a student can work it out by knowing the general direction.

Icepickle Over a year ago

That can be, but you can hide the code snippet here as well, and he can still choose to look at it after he either got or didn't get your text. The jsfiddle that you posted is a temporary link, so in case somebody gets to this assignment again in say 2 months, your link might no longer be available and then nobody will really be helped with your text (and it's also desired to have the answers on SO and not somewhere on the web). Last argument would be that you nicely avoided the no jsfiddle link without providing code by formatting some text as code.

Mitchell Over a year ago

I actually did somewhat follow what you were saying, only I used direct text in my Javascript: function unDo(preview){ document.getElementById('image').innerHTML = "Hover over an image below to display here."; }

Inacio Schweller · Accepted Answer · 2016-02-24 19:40:21Z

1

I rebuild your solution in a JSFiddle and proposed a solution:

JS

function update(element) {
  document.getElementById('image-alt').innerHTML = element.alt;
}

function undo(preview) {
  document.getElementById('image-alt').innerHTML = 'Hover over an image below to display here.';
}

HTML (Made with only 1 image to keep it clean, just follow the pattern)

<div id= "image">
<p id="image-alt">Hover over an image below to display here.</p>
</div>

<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onMouseOver = "update(this)" onMouseOut = "undo()" />

Here is the Fiddle link

Hope it helps!

answered Feb 24, 2016 at 19:40

Inacio Schweller

1,97613 silver badges22 bronze badges

Comments

user2570380 · Accepted Answer · 2016-02-24 19:49:52Z

1

function unDo(preview){
 document.getElementById('image').innerHTML = preview.alt;
}

You're using the preview object, but when you call unDo onMouseout here:

    <img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onMouseOver="upDate(this)" onMouseout="unDo()">

you do not pass any argument to it. So, preview is undefined in unDo(). Plus, you're not storing the original text of the div#image.

Some other suggestions:

You've used onMouseOver, onMouseout, onMouseleave events. What you're looking for are the onmouseenter and onmouseleave events. Also, notice that they're all lowercase, so please be consistent.
Avoid spaces between attribute and their values. So, class="preview" instead of class = "preview".
It is better to attach events using JavaScript instead of as attributes -- separates the structure of HTML with the functionality provided by JS.

On to the solution:

Get all the images on the page, and attach mouseenter and mouseleave events to them.
Store the display div element and its default text.
The event handlers update the text in the display div.

https://jsfiddle.net/rgy064xk/

var images = document.getElementsByTagName('img');
var display = document.getElementById('image');
var defaultText = display.innerHTML;

for (var i = 0; i < images.length; ++i) {
  images[i].onmouseenter = onEnter;
  images[i].onmouseleave = onLeave;
}

function onEnter(e) {
  display.innerHTML = e.target.alt;
}

function onLeave(e) {
  display.innerHTML = defaultText;
}

body {
  margin: 2%;
  border: 1px solid black;
  background-color: #b3b3b3;
}

#image {
  width: 575px;
  height: 200px;
  line-height: 200px;
  border: 5px solid black;
  margin: 0 auto;
  background-color: #8e68ff;
  color: #FFFFFF;
  text-align: center;
  margin-bottom: 25px;
  font-size: 150%;
}

.preview {
  width: 10%;
  margin-left: 17%;
  border: 5px solid black;
}

img {
  width: 95%;
}

<div id="image">
  Hover over an image below to display here.
</div>

<img class="preview" alt="Styling with a Bandana" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg">

<img class="preview" alt="With My Boy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG">

<img class="preview" alt="Young Puppy" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg">

answered Feb 24, 2016 at 19:49

user2570380

2 Comments

Mitchell Over a year ago

Thanks. These are some great tips. I was wondering what the difference was between onMouseOut and OnMouseLeave. Are they two different things? I ask because everything that I am using works. I just want to do what's considered correct. -onMouseOver vs onMouseEnter -onMouseOut vs onMouseLeave Are some of these older reserved words that are being phased out? Thanks. Also, in the end, I always try to capitalize every word except for the first one. Do all lowercase vs capitalization matter?

user2570380 Over a year ago

jsfiddle.net/j4q2xpfv/1 should help understand the difference (over and out fire upon interaction with child elements, in addition to the element that a handler is attached to, while enter and leave do not). mouseover is generally used with mouseout, and mouseenter with mouseleave. For most cases, including this one, enter and leave is what is intended. For the case, tag names and attribute names are case-insensitive, while attribute values are case-sensitive, however it is the norm to keep HTML lowercase.

caldera.sac · Accepted Answer · 2016-02-24 20:03:26Z

try this code.just do like I did.

<!DOCTYPE html>
    <html>
    <head>
    <title>hover</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 <style type="text/css">
     body{
        margin:0;
        padding:0;
        width: 100%;
        
     }

   div.displaytext{
    width: 60%;
    height: 400px;
    box-shadow: 1px 2px 1px black;
    text-align: center;
    margin-left:20%;
    border-left: 1px solid black;
    border-top: 1px solid black;
   }

div.myimages{
    width: 60%;
    height: 200px;
    box-shadow: 1px 2px 1px black;
    text-align: center;
    margin-left:20%;
    border-left: 1px solid black;
}

div.myimages div{
  width: 30%;
  height: 90%;
  margin-left: 2.5%;
  margin-top: 1%;
  border:1px solid black;
  float: left;
}

 </style>

 </head>
 <body>
  <div class="displaytext"><h1 class="mytext">hover over an image</h1></div>
  <div class="myimages">
    <div class="imgone"><img src=""></div>
    <div class="imgtwo"><img src=""></div>
    <div class="imgthree"><img src=""></div>
  </div>
 </body>


 <script type="text/javascript">
  $(document).ready(function(){
   
    $(".imgone").mouseenter(function(){
      $(".mytext").text("description one");
    });
    $(".imgone").mouseleave(function(){
      $(".mytext").text("hover over an image");
    });

    $(".imgtwo").mouseenter(function(){
      $(".mytext").text("description two");
    });
    $(".imgtwo").mouseleave(function(){
      $(".mytext").text("hover over an image");
    });

    $(".imgthree").mouseenter(function(){
      $(".mytext").text("description three");
    });
    $(".imgthree").mouseleave(function(){
      $(".mytext").text("hover over an image");
    });
  });
 </script>
</html>

just copy, paste and try it.then implement it to your project.I didn't put any images.

He wants the text to revert to the text that was there before the mouseover change got made

Collectives™ on Stack Overflow

How to undo with onMouseOut with Javascript?

4 Answers 4

5 Comments

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related