-1

I have a cell phone img, it's broke then gets fixed then the screen pulls up a notepad(on the cell phone) I don't quite get how to make the mouseover turn the screen fixed then open the notepad on it with the "cart" information, how would this work?

Athena Swaney
  • 3
  • 1
  • You have to put a little more effort in your question, I'm afraid. I don't think that anyone out there gets what you are asking :) – OddDev Mar 12 '15 at 06:26
  • Okay here is the gif [link](http://sellyourbrokentech.com/169299.gif) how do I have that not loop, I want it to only start on mouseover and while leaving your mouse on it I want it to pause at the blank part, so I can add text inside it.. as if it were a website shopping cart showing your goods. – Athena Swaney Mar 12 '15 at 06:31
  • I would recommend to use 3 different images instead of a gif. You really don't do it like that. A gif is not supposed to be used as an UI element. – OddDev Mar 12 '15 at 06:38
  • @OddDev I'm down to use all three of the images I used to make the gif.. I just don't know how to code it to work for the mouseover I know how to position text over it .. once done – Athena Swaney Mar 12 '15 at 06:42

1 Answers1

0

Okay, your html looks like this: 

<img id="img1" src="image1.jpg" />

It shows the phone.

Your JS looks like this: 

var img = document.getElementById("img1");
img.addEventListener("mouseenter", function( event ) {   
    //replace the imagesource with the second image
}, false);

https://developer.mozilla.org/en-US/docs/Web/Events/mouseover

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

OddDev
  • 3,644
  • 5
  • 30
  • 53
  • Do I make a .js for that? – Athena Swaney Mar 12 '15 at 06:55
  • I'm just confused lol idk how this works and "replace the imagesource" where is the imagesource in that js code? – Athena Swaney Mar 12 '15 at 07:01
  • In the img tag (the attribute is called 'src'). Maybe you should start with a basic html tutorial rather than doing mouseover stuff. – OddDev Mar 12 '15 at 07:03
  • fthat I got the code up just how do I link the second image so it changes to that? – Athena Swaney Mar 12 '15 at 07:07
  • img.setAttribute("src", "image2.jp"); https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute – OddDev Mar 12 '15 at 07:13
  • [link](http://sellyourbrokentech.com/) it's in the middle of that page lol var img = document.getElementById("img1"); img.addEventListener("mouseenter", function( event ) { img.setAttribute("src", "image3.png"); //replace the imagesource with the second image }, false); named this fiddle.js and nothing seems to change? – Athena Swaney Mar 12 '15 at 07:17