PDA

View Full Version : Mouseover problem

Impi
03-26-2005, 11:47 AM
Hi
I wanted to make a new design for my homepage and now i have a problem..
I wrote a mouseover script for a button, but i have no idea how i can change the size then...when i go with the mouse over the pic, the size doesn't change..its still the same >.<

i want that the pic get bigger, when i go over the pic with the mouse.


here is my html code:



<SCRIPT TYPE="text/javascript">
<!--

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>

<A
HREF="home_ro.html"
onMouseOver = "rollover('home')"
onMouseOut = "rollout('home')"
><IMG
SRC="button.gif"
NAME="home"
HEIGHT=52 WIDTH=60 BORDER=0 ALT="home"
></A>
<SCRIPT TYPE="text/javascript">
<!--
setrollover('emblem.gif');
//-->
</SCRIPT>



Thanks for help x.X


bye Impi
KWJams
03-26-2005, 12:09 PM
Do you have two buttons one just a tad larger than the other?
Impi
03-26-2005, 12:17 PM
hm yes i wanted that i have a button, and when i go with the mouse over it, it shine and on an other place there is a text (picture) like "home"..hard to describe x.X

And i dont know how i can do it..thats why i wanted to make a button, and when i go with the mouse over it, then is a large pic, which include the shiny button and the text.

Better would be, when someone give me a html code how i can make a "double" mouseover, like it shine and on an other place there is "home" or smth x.x


I hope u understand it..otherwise i upload it on my webspace and show u.
KWJams
03-26-2005, 12:27 PM
<-Here-> (http://www.psphelp.com/v7_web_m_over_simple.php) is a tutorial that may help.

By the way welcome to the forum :)
Impi
03-26-2005, 12:33 PM
This tutorial doesnt help <.<
I have a mouseover effect..look on my html code.

I just want that the pic get larger, and this is not described on the tutorial.

And better then larger would be, when i get a script which include, that a pic is on an other place when i go with the mouse over a pic..and it changes by itself too (for example shiny).
So a "double mouseover" effect..not that simple as in this tutorial.
KWJams
03-26-2005, 12:43 PM
Maybe I am not understanding what you are asking? :confused:

It takes two graphics --- one that is normal and one that is a larger shiny button with "home" written on it.

The code only tells the browser to display a graphic. When the mouse over code tell the browser to display the other graphic -- that other "different" graphic has to exist.
_Aerospace_Eng_
03-26-2005, 02:13 PM
your script was really complex for just a mouseover, this is the mouseover for a single image
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Single Mouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function rollover(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
function rollout(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
// -->
</script>

</head>

<body>
<a href="home_ro.html"
onmouseover="rollover('home','shiny.gif','100','36')"
onmouseout="rollout('home','notshiny.gif','92','36')">
<img src="notshiny.gif" id="home" height="36" width="92" border="0" alt="home"></a>
</body>
</html>
you change the size of the image that rollsovers, or keep it the same ur choice, and here is the script for a "double rollover"
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Single Mouseover</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function rollover(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
function rollover2(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
function rollout(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
function rollout2(what,which,wid,hgt){
document.getElementById(''+what+'').src=''+which+'';
document.getElementById(''+what+'').width=''+wid+'';
document.getElementById(''+what+'').height=''+hgt+'';
}
// -->
</script>

</head>

<body>
<a href="home_ro.html"
onmouseover="rollover('home','shiny1.gif','100','36');rollover2('roll2','shiny2.gif','92','36')"
onmouseout="rollout('home','notshiny1.gif','92','36');rollover2('roll2','notshiny2.gif','92','36')">
<img src="notshiny1.gif" id="home" height="36" width="92" border="0" alt="home"></a>
<img src="notshiny2.gif" id="roll2" height="36" width="92" border="0" alt="info">
</body>
</html>
there are more ways of doing this, those were just a few
Impi
03-26-2005, 11:25 PM
Thanks, that is what i searched :)