PDA

View Full Version : [RESOLVED] Custom cursor, onMouseOver, only works twice!

Seymour Clufley
02-12-2008, 07:21 PM
Here is the code I'm using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD>
<TITLE>test</TITLE>

<SCRIPT><!--
function HoverCursor(oImg){ oImg.style.cursor='url(test2.ani)'; }
function NormalCursor(oImg){ oImg.style.cursor='url(MainBodyCursor.cur)'; }
--></SCRIPT>

<STYLE>
BODY{cursor:url("MainBodyCursor.cur");}
</STYLE>

<STYLE type=text/css>
.main { font-family: Courier New; font-size: 12px; color: #FFFFFF; background: #101010 }
.cursorchange { border:0px; border-color:#FFFFFF ; }
a.cursorchange:hover { cursor:url(HoverCursor.cur); }
</STYLE>

</HEAD><BODY class=main><TABLE width=99% align=center>

<img src="bitmap.bmp" name="attackme" onmouseover="HoverCursor(this)" onmouseout="NormalCursor(this)" >
<BR>This image uses an onMouseOver event to trigger a JavaScript function to change the cursor. And then an onMouseOut event triggers another JS function to change the cursor back to normal.

<P><P><P>

<a href="#" class="cursorchange"><img src="bitmap.bmp"></a>
<BR>This image uses CSS - the "CursorChange" class. It works fine changing the cursor, but the image has an annoying blue outline!
<P><P>

</TABLE></BODY></HTML>

The problems are detailed in the page. I'm using two different methods to try to get the effect I want. It's simply for the cursor to change to a custom cursor whilst it is over an image, and then change back when it leaves the image.

The first method uses onMouseOver to trigger a JavaScript function. The problem here is that, bizarrely, the cursor change only works twice. Or once, if I include an onMouseOut event.

The second method uses CSS. The problem here is that, though the cursor stuff works fine, the image has a border around it which I would like to get rid of.

The page uses a BASE tag at the start but removing that seems to make no difference. Why would the JavaScript function only work once? It's strange. And why can't I get rid of the border created by the CSS method?

Can anyone please help? I'd be very grateful.
rangana
02-12-2008, 09:35 PM
Hi Seymour Cluefley,
To get those annoying blue borders, put border='0' in the image tag.
Pegasus
02-12-2008, 09:38 PM
To get rid of the blue border around your image, add this to the CSS:

a img {border: none; }
Seymour Clufley
02-13-2008, 12:46 AM
Thanks very much. But is there a way to use CSS without making the image clickable? It's the HREF tag, it means that if the user clicks it the browser will try to do something, and I just want the image to be static.
rangana
02-13-2008, 02:01 AM
What do you mean by "making image clickable?"
Will adding a border:none; to your CSS change the link's reaction?
Seymour Clufley
02-13-2008, 02:49 AM
This line:

<a class="cursorchange"><img src="bitmap.bmp"></a>

In order to use the CSS method, it seems I have to turn the IMG into a hyperlink (by inserting HREF="#"). If I don't do that, the CSS doesn't work. So the above line becomes:
<a href="#" class="cursorchange"><img src="bitmap.bmp"></a>Now I don't want the image to be a hyperlink. And whether I add "border:none" to the style doesn't seem to make any difference. As long as "href" is in there, the image is clickable, and I don't want it to be.

Sorry if I was unclear in the last post.
rangana
02-13-2008, 02:56 AM
I'm not taking this right!...Apologize in advance :D
To get the annoying blue, change this code
<a href="#" class="cursorchange"><img src="bitmap.bmp"></a>
to:
<a href="#" class="cursorchange"><img src="bitmap.bmp" border="0"></a>

Now that has a fix. Reading your CSS, I don't see any action in the CSS during click, but hover instead :D
Seymour Clufley
02-13-2008, 04:13 AM
No, that's not what I mean.

I have successfully got rid of the annoying blue border. That isn't the problem.

The problem is that the image is now a clickable hyperlink. It's because of this code:

<a href="#" class="cursorchange"><img src="bitmap.bmp" border="0"></a>

The HREF makes it a hyperlink. I don't want it to be a hyperlink. I want it to be a non-clickable image that change the cursor whilst it hovers it.
rangana
02-13-2008, 04:31 AM
Hi seymour,
Try replacing this code :
<a href="#" class="cursorchange"><img src="bitmap.bmp" border="0"></a>


to : <img src="bitmap.bmp" border="0" style="cursor:url(HovverCursor.cur);">

In this way, when the mouse gets focus on the image the cursor is changed.

Hope this helps :D
Seymour Clufley
02-13-2008, 05:43 PM
Thanks Rangana! That seems to be perfect. :)
rangana
02-13-2008, 06:56 PM
You're welcome!..Glad I could help! :D