Onmouseover to change cursor?

	Home Register Search Help Login

Recent Posts
Todays Posts
Most Active posts
Posts since last visit
My Recent Posts
Mark posts read

Sponsors
Shopping Cart Software
Ecommerce software integrated into Frontpage, Dreamweaver and Golive templates. No monthly fees and available in ASP and PHP versions.
Website Templates
We also have a wide selection of Dreamweaver, Expression Web and Frontpage templates as well as webmaster tools and CSS layouts.
Frontpage website templates
Creative Website Templates for FrontPage, Dreamweaver, Flash, SwishMax

Onmouseover to change cursor?

View related threads: (in this forum | in all forums)

Logged in as: Guest

Users viewing this topic: none

Printable Version

All Forums >> Web Development >> General Web Development >> Onmouseover to change cursor?

Page: [1]


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	Onmouseover to change cursor? - 6/16/2007 8:07:29 I have image buttons on a page which have various onClick actions - e.g.: - <img src="buttons/butonhome.gif" name="btn1" border="0" alt="" onClick="parent.main.location='homepage.htm'; parent.forpics.location='side.htm';> I want to have the cursor change to the 'hand' (pointer) on mouseover, but have tried some code without success. I've tried inserting within the 'img' brackets: - onmouseover="javascript:new.style.cursor='pointer'"; -and onmouseover="this.style.cursor='pointer'; - but neither work. Your suggestions welcomed.


jaybee Posts: 14320 Joined: 10/7/2003 From: Berkshire, UK Status: offline	RE: Onmouseover to change cursor? - 6/17/2007 17:17:58 You can do it with CSS using the hover state www.w3schools.com _____________________________ If it ain't broke..... fix it until it is. GAWDS Now where did I put that Doctype? (in reply to Raaid)


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	RE: Onmouseover to change cursor? - 6/18/2007 4:48:43 quote: You can do it with CSS using the hover state I understood that the 'hover' class can only be used for an anchor, as in: - a:hover {cursor:pointer; color: #FF00FF} How can this be used for an img ? (in reply to jaybee)

jaybee

Posts: 14320
Joined: 10/7/2003
From: Berkshire, UK
Status: offline

RE: Onmouseover to change cursor? - 6/18/2007 7:50:10

There is a tutorial around somewhere on doing it without anchors but I've temporarily lost it, Tailslide may have it bookmarked.

You can put a hover on any element but dear old useless Internet Explorer doesn't recognise it.

You can do it with anchors but just anchor them nowhere, for example, here's some code off a site I did:

CSS

a.pic {
display: block;
width: 100px;
height: 50px;
background: transparent url(image1.jpg) no-repeat;
}

a.pic:hover {
background-position: -100px 0;
}

HTML

<div>
<a class="pic"href="#">link</a>
</div>

The relevant bit is href="#"

If you don't want the hand cursor appearing then use the css to change it for that instance

_____________________________

If it ain't broke..... fix it until it is.

GAWDS
Now where did I put that Doctype?

(in reply to Raaid)


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	RE: Onmouseover to change cursor? - 6/19/2007 3:45:20 Thanks Jaybee, but I can't see how to incorporate your suggested html into my 'image' code. Bear in mind that the html example I gave is a menu button, one of 6 buttons in a frame. (in reply to Raaid)


womble Posts: 6009 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Onmouseover to change cursor? - 6/19/2007 10:04:30 Raaid - if you can post your code, we can take a look at it an see. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to Raaid)


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	RE: Onmouseover to change cursor? - 6/19/2007 14:41:50 Please see my first post. (in reply to womble)


womble Posts: 6009 Joined: 3/14/2005 From: Living on the edge Status: offline	RE: Onmouseover to change cursor? - 6/19/2007 15:18:13 Ooops! Must have skipped that bit! As Jaybee said, you just need to wrap your link, which in your case is your image, in an empty <a> tag, so you'd have: <a class="whatever" href="#"><img src="buttons/butonhome.gif" name="btn1" border="0" alt="" onClick="parent.main.location='homepage.htm'; parent.forpics.location='side.htm';></a> Then you simply apply your a:hover to your CSS class. _____________________________ ~~ "A cruel god ain't no god at all" ~~ ~~ Erase hate. Practice love. ~~ (in reply to Raaid)


jurgen Posts: 424 Joined: 1/9/2007 From: Castle Rock, Colorado Status: offline	RE: Onmouseover to change cursor? - 6/19/2007 16:36:27 I googled and I found this one. It only works in IE: There are nine types of cursors to choose from:<br> TO SEE EACH TYPE, RUN THE CURSOR OVER THE NAME<br><br> 1. <span class="CODE" onMouseOver="this.style.cursor='auto'">auto</span><br> 2. <span class="CODE" onMouseOver="this.style.cursor='crosshair'">crosshair</span><br> 3. <span class="CODE" onMouseOver="this.style.cursor='default'">default</span><br> 4. <span class="CODE" onMouseOver="this.style.cursor='hand'">hand</span><br> 5. <span class="CODE" onMouseOver="this.style.cursor='move'">move</span><br> 6. <span class="CODE" onMouseOver="this.style.cursor='s-resize'">-resize (where is n, ne, nw, s, se, sw, e or w)</span><br> 7. <span class="CODE" onMouseOver="this.style.cursor='text'">text</span><br> 8. <span class="CODE" onMouseOver="this.style.cursor='wait'">wait</span><br> 9. <span class="CODE" onMouseOver="this.style.cursor='help'">help</span><br> Mouse Icon (in reply to womble)


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	RE: Onmouseover to change cursor? - 6/20/2007 1:01:05 quote: ORIGINAL: womble As Jaybee said, you just need to wrap your link, which in your case is your image, in an empty <a> tag, ..... Then you simply apply your a:hover to your CSS class. Thanks Womble - I failed the lateral thinking test again! (in reply to womble)


Raaid Posts: 13 Joined: 6/3/2007 Status: offline	RE: Onmouseover to change cursor? - 6/20/2007 1:03:52 quote: I googled and I found this one. It only works in IE: Thanks Jurgen. (in reply to jurgen)

Page: [1]

All Forums >> Web Development >> General Web Development >> Onmouseover to change cursor?

Page: [1]

Jump to: 1

New Messages	No New Messages
Hot Topic w/ New Messages	Hot Topic w/o New Messages
Locked w/ New Messages	Locked w/o New Messages

Post New Thread

Reply to Message

Post New Poll

Submit Vote

Delete My Own Post

Delete My Own Thread

Rate Posts