/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Mouseover / Mouseout Events – image disappears after mouseout event and it shouldn’t

Copy linkTweet thisAlerts:
Nov 18.2014

Hi, the third flag image (Australia) should double in size with the mouseover event and reduce to the original size with the mouseout event. On the mouseover event it does double in size, however after the mouseout event the image disappears. Thank you for your help in advance.

My code:

[CODE]<script type=”text/javascript”>

var myImages = new Array(“usa.gif”,”canada.gif”,”jamaica.gif”,”mexico.gif”,”australia.gif”);

function changeImg(that)
{
var newImgNumber = Math.round(Math.random() * 4);

while (that.src.indexOf(myImages[newImgNumber]) != -1)
{
newImgNumber = Math.round(Math.random() * 4);
}

that.src = myImages[newImgNumber];

return false;
}

[COLOR=”#FF0000″]function largeImg(that)
{
that.width = 2 * that.width;
that.height = 2 * that.height;
}

function originalImg(that)
{
that.width = “275px”;
that.height = “175px”;
}[/COLOR]
</script>

</head>

<body>

<img name=”img0″ src=”usa.gif” border=”0″ onclick=”return changeImg(this)” />

<img name=”img1″ src=”mexico.gif” border=”0″ onclick=”return changeImg(this)” />

[COLOR=”#FF0000″]<img id=”img2″ src=”australia.gif” border=”0″ width=”275″ height=”175″ onmouseover=”return largeImg(this)” onmouseout=”return originalImg(this)” />[/COLOR]

</body>[/CODE]

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Nov 18.2014 — Hmmm. JavaScript to do the job of CSS. And neither work on a touchscreen. Here's a CSS solution that works with small rodents:
[code=html]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flags</title>
<style>
img {
border:0;
vertical-align:top;
width:275px;
height:175px;
}
#img2:hover {
position:absolute;
top:1%;
left:30%;
z-index:1000;
width:550px;
height:350px;
box-shadow: 10px 10px 5px #888;
}
</style>

<script>
var myImages = new Array("usa.gif","canada.gif","jamaica.gif","mexico.gif","australia.gif");

function changeImg(that)
{
var newImgNumber = Math.round(Math.random() * 4);

while (that.src.indexOf(myImages[newImgNumber]) != -1)
{
newImgNumber = Math.round(Math.random() * 4);
}

that.src = myImages[newImgNumber];

return false;
}
</script>

</head>

<body>

<img name="img0" src="usa.gif" onclick="return changeImg(this)">

<img name="img1" src="mexico.gif" onclick="return changeImg(this)">

<img id="img2" src="australia.gif">

</body>
</html>[/code]

Since you're in a JavaScript class this may not be much help, but it's a real-world solution.
Copy linkTweet thisAlerts:
@BlondieCauthorNov 18.2014 — Hi Kevin, this course seems to be anything but real-world - so frustrating. We are only allowed to use JavaScript so I have to figure out betweein the 2nd and 3rd functions why the image disappears.
Copy linkTweet thisAlerts:
@JeffTheCobbNov 18.2014 — Get rid of the "px" in your originalImg() function. You only need that when setting sizes via .style...

function originalImg(that)
{
that.width = "275";
that.height = "175";
}
Copy linkTweet thisAlerts:
@BlondieCauthorNov 19.2014 — JeffTheCobb - that did it! Thank you. I knew it had to be something obvious that I was over-looking.
×

Success!

Help @BlondieC spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...