Changing cursor properties while <input> field. 1

[josel]

Howdy!

I learned how to change the cursor to a hand using onMouseOver ... which is pretty neat; it allows the use of tables to emulate buttons thus making your pages load much faster.

Now, I wonder if I can make hair-line cursor look like a blinking block when placed whithin an input field. If so, how?

Thanks;


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[josel]

OK, a search revealed a thread where this was addressed.

.miainput 
{
background-color: 0066FF;
cursor: url("gif/cursor.gif");
}

The syntax cursor: url("gif/cursor.gif"); is suggested as the solution. I created an small 8x10 gif and called it cursor.gif. I added above to my SS but cursor steel looks like hair-line.

What am I missing? Must I create the image a bid bigger than that?

Thanks;


Jose Lerebours


KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[gohankid77]

As far as I know, you can't use an image as a cursor without DHTML. Dynamic Drive (

http://www.dynamicdrive.com)

has some great scripts for making a cursor do different things. If that doesn't work, you will probably have to do things the long way and make a cursor of your own. By that I mean that it must have a .cur (cursor) or .ani (animated cursor) extension. Then change the url to the location and filename of the cursor.
Example:

.miainput
{
background-color: 0066FF;
cursor: url("/cursors/myanicur.ani");
}

 

[vbkris]

one more thing, can i change the cursor over a map area? i tried it didnt work, i used the style attribute:
<map area>
<area ..... style="cursor:hand">...


didnt work...

Known is handfull, Unknown is worldfull

 

[BillyRayPreachersSon]

>> one more thing, can i change the cursor over a map area?

Coincidentally, I needed to do this myself yesterday... And tried using a CSS solution identical to yours with no success... I gave up in the end after trying a few things... So I'd be interested to see if this can be done, too.

Dan

 

[vbkris]

, have u heard misery loves company? i am consoled a bit...

Known is handfull, Unknown is worldfull

 

[josel]

vbkris/BillyRayPreachersSon:

I am able to change "pointer" to a hand using

<td class="nav" onMouseOver="bgColor='#0099ff';return true" onMouseOut="bgColor='#CCCCCC';return true" onClick="parent.parent.rightframe.location='rightframe.htm'" style="cursor:hand">

Notice that this is attribute change for a cell. I have not tried it with <area ...> as you are attempting but I wonder if it could be combined with other triggers such as "onMouseOver()" thy of thing ... !!! ???


gohankid77,

Thanks for pointing that out ... good info. Now, I wonder what can I use to create such image. As I submit, I am opening a couple of my image editors. Thanks!!!!!

Regards;


Jose Lerebours

KNOWLEDGE: Something you can give away endlessly and gain more of it in the process! - Jose Lerebours

 

[BillyRayPreachersSon]

I've just checked MSDN, and for "area" and "map" tags, there is no "cursor" style... So guessing it cannot be done ;o(

Dan

 

[gohankid77]

BillyRayPreachersSon is correct. I even searched the XHTML DTDs, but to no avail. And since the JavaScript used to change the cursor is based on CSS (at least the one I know), it won't work.

As for combining it with other tags that support it, it's possible. First, you need the element defined by an ID. Choose a block element to put the ID in and choose an inline element (I prefer <span>).

Add the following attribute:
onmouseover="yourid.style.cursor='yourcursor';"

'yourcursor' can be either a .cur or .ani file, or it can be a predefined cursor such as 'hand', 'ns-resize', or 'wait'

So in code, it would look like this:

<p id="cool"><span onmouseover="cool.style.cursor='miscfiles/demo.ani';">Your Stuff Here</span></p>

or

<p id="cool"><span onmouseover="cool.style.cursor='move';">Your Stuff Here</span></p>

I validated this and it works!

Hope that helps!

 

[vbkris]

ah, javascript, i wnated to do it without JS, but thanks anyway, let me test it...

Known is handfull, Unknown is worldfull