PDA

Click to See Complete Forum and Search --> : adding curser change to image rollovers

kenara
09-14-2003, 11:44 AM
hi i need to know how to add a curser change to to image rollover

i have got this code workeg so far but dont know how to add a curser change to both rollovers


here is the code

<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!-- Hide script from non-JavaScript browsers
function ImgOver1()
{
document.image1.src="molly.gif";


}

function ImgOut1()
{
document.image1.src="Katy.gif";


}


function ImgOver2()
{
document.image2.src="molly.gif";

}

function ImgOut2()
{
document.image2.src="Katy.gif";
}


msgText = " text "
i = 0
function Scroller()
{
window.status = msgText.substring(i,
msgText.length) + ' ' + msgText.substring(0, i - 1)
if (i < msgText.length)
{
i++
}
else
{
i = 0
}
setTimeout("Scroller()", 50)
}

// End hiding script from non-JavaScript browsers -->
</script>
<noscript>Your browser has disabled JavaScript</noscript>
</head>



<body onLoad="Scroller()">


<a href="#" onMouseOver = "ImgOver1()"
onMouseOut = "ImgOut1()">
<IMG name="image1" width=100 height=100 border=0
src="molly.gif"></a>

<a href="#" onMouseOver = "ImgOver2()"
onMouseOut = "ImgOut2()">
<IMG name="image2" width=100 height=100 border=0
src="molly.gif"></a>


</body>
</html>
zachzach
09-14-2003, 01:01 PM
change:



function ImgOver1()
{
document.image1.src="molly.gif";


}


to:


function ImgOver1()
{
document.image1.src="molly.gif";
document.image1.style="cursor:hand"

}


hand.....thats the cursor name you can also specify curor.cur(a file)

hope that helps
zach
chao
pyro
09-14-2003, 01:08 PM
Note that hand is not a valid cursor name. You should use pointer instead: http://www.w3.org/TR/REC-CSS2/ui.html#cursor-props
kenara
09-14-2003, 01:20 PM
nope that doesnt seem to work
pyro
09-14-2003, 01:46 PM
document.image1.style="cursor:hand"

should be

document.image1.style.cursor="pointer";

Or better, you should use CSS:

<style type="text/css">
a:hover {
cursor: pointer;
}
</style>
zachzach
09-14-2003, 03:35 PM
oh i wasn't sure about the name and isn't the style proporty just css?
kenara
09-14-2003, 03:48 PM
nope that does seem to work either
and i dont want to use css

do you think i should call the curser in a different function
zachzach
09-14-2003, 04:03 PM
are you using a browser fro the 1970's?
lol
really what browser and what version are you using on IBM or MAC?
pyro
09-14-2003, 04:03 PM
Originally posted by kenara
and i dont want to use cssWhether you want to or not, you have to. Even the JavaScript method relies on CSS...

Also, this code worked fine, when I tested it:

<script type="text/javascript">
function mouseOver() {
document.myimg.style.cursor='pointer';
}
</script>
</head>
<body>
<img src="some.gif" name="myimg" alt="description" onmouseover="mouseOver();">
kenara
09-14-2003, 04:45 PM
i am testing it on both netscape and IE latest versions
and i am using a pc

i will try that code later and let you know but im getting tired now so i wont be back on until tommorow

in the meantime do you see anything wrong with the the code that is in my first message
kenara
09-15-2003, 08:56 AM
pyro that piece of code works on its own but where would i insert it into my code so i can get the the curser to change as it goes the mouse goes over it and at the same time changing to another image


could you insert this into my existing code for me


if this does not work with your own images please could you write a piece of code in javascript not css , that does work
pyro
09-15-2003, 10:10 AM
Here you go:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
<!-- Hide script from non-JavaScript browsers
function ImgOver1() {
document.image1.src="molly.gif";
document.image1.style.cursor = 'pointer';
}
function ImgOut1() {
document.image1.src="Katy.gif";
document.image1.style.cursor = 'default';
}
function ImgOver2() {
document.image2.src="molly.gif";
document.image2.style.cursor = 'pointer';
}
function ImgOut2() {
document.image2.src="Katy.gif";
document.image2.style.cursor = 'default';
}
msgText = " text "
i = 0
function Scroller() {
window.status = msgText.substring(i, msgText.length) + ' ' + msgText.substring(0, i - 1)
if (i < msgText.length) {
i++
}
else {
i = 0
}
setTimeout("Scroller()", 50)
}

// End hiding script from non-JavaScript browsers -->
</script>
<noscript>Your browser has disabled JavaScript</noscript>
</head>
<body onload="Scroller()">
<p><a href="#" onmouseover="ImgOver1()" onmouseout="ImgOut1()">
<IMG name="image1" width=100 height=100 border=0 src="molly.gif" alt="description"></a>

<a href="#" onmouseover="ImgOver2()" onmouseout="ImgOut2()">
<IMG name="image2" width=100 height=100 border=0 src="molly.gif" alt="description"></a></p>
</body>
</html>

One thing you might want to chage is which image is displayed onmouseover/onmouseout. Right now, you have it set to display the same image as is defaultly displayed when uses mouseover, and change when they mouseout... You probably meant to do it the other way around...