Change image mouse-over icon

Nin / 2011-12-07 09:46:08   

Hi,

I was wondering if it's possible to change the image mouse-over icon without changing my exhibition format...?

Per example, in this website, when you click on an exhibition and put your mouse over the image, the icon shows a very nice arrow instead of the classic Mickey Mouse hand icon...

I've been searching everywhere about "mouse over cutomization" but found nothing specific about the icon...

Thanks a lot,

A.

rickykappa / 2011-12-07 10:32:24   

you could start here...
;-)

Nin / 2011-12-07 11:22:19   

Thank you RickyKappa!

Now, if I got it right my code should look like something like that:

  1. div
  2. {
  3. cursor:url(my_picture_url.png),auto;
  4. }

Or like that:

  1.  < div id= "cursor" ="cursor: url('cursor.png')">n" < /div>n" 

Or even like that:

  1. < p align="center" style="cursor: url('cursor.url')">Text< /p>

Plus, the cursor id in my style CSS right...?

But... I still have no clue where to add this :-
In my format plugin? In my php file?

Thanks for your time,

A.

Nin / 2011-12-08 10:32:01   

Well, well...

I had to make a choice between all the different ways to change the image onmouseover cursor (CSS, JQuery...) and for the moment: Absolutely no resuts!! Sorry to disappoint :-

I tried this:

  1. < head> 
  2. < style type='text/css'> 
  3. img a:hover { cursor: url('http://anais.antonio.free.fr/files/cursor.cur'), pointer;}
  4. </style>

And this:

  1. $(document).ready (function() {

$('img'). hover(function();{
$(this).attr("src", "cursor: url('http://anais.antonio.free.fr/files/cursor.cur')");
}, function(){
$(this).attr("src", "cursor: url('http://anais.antonio.free.fr/files/classik.cur')");
});
});

(this one is ridiculously complicate though... I'm not even sure it's good... and even less that it will work on all browsers...)

And this in my stylesheet:

  1. #img a:hover  { cursor: url('http://anais.antonio.free.fr/files/cursor.cur'), pointer;}

I also made www.w3scholls.com my new bedside digital-book but nothing came out from that neither...

Any..... help please?

Thx

A.

Nin / 2011-12-08 12:05:07   

Whoop!! Whoop!!

I just needed a coffee! Geez...!

Indeed Jquery was really too complicate... I did it by CSS!

Thanks a lot!

A.

Nin / 2011-12-08 12:13:24   

Oh noooooo....

Now my pre-nav logo (witch is also an image) answer to the same cursor... :-(

Nin / 2011-12-08 15:20:40   

Oh dear...
Ok! I'm done with that!
Pffiou!

Now, since I'm dialoguing with myself, and was then oblige to just, think as an adult and put myself together... (thank you for learning me this also :-) )

I thought I could maybe help others that will or are going through this same problem!

So...

1) For a personalized image onmouseover cursor:
-find this line in your stylesheet

  1. a img { }

and add this:

  1. a img { 
  2.     cursor: url('my_website_custom_cursor.cur');
  3. }

Note:
The extension ".cur" is specific to cursors...
So, you have to dowload your cursor via a cursor website or simply use the basic ones!
-->(right here)

Now if like me, you don't find anything matching your taste...
I figured out that you can make a cursor via a favicon.generator by just saving the fav' on your computer and the change the ".ico" extension to ".cur".

Also, the cool thing about that, is that you can download one of your own picture as a favicon and then make it a cursor ;-)
It's up to you!

Now for people that will have the same problem as me about their "pre-nav" logo that act as an "img" and then show the cursor you just setted up for your pics...

Here's the solution:

2) Get rid of the classic code in your pre-nav:

  1. < a href="http://your.website.com">< img src="http://your.website.com/files/your_logo.png" />

And create a "logo" div id in your style CSS:

  1.  #logo {
  2. background: url('http://your.website.com/files/your_logo.png')  no-repeat scroll transparent;}

Now, in your "pre-nav" add this code:

  1. < a href="http://your.website.com">< div id="logo">< /div>

And delete the < a href> tag if you don't want your logo to link back to your homepage...

Now, to make your logo "onmouseover cursor" normal, add this to your StyleCSS logo div id:

  1. #logo {
  2. background: url('http://your.website.com/files/your_logo.png')  no-repeat scroll transparent;
  3. cursor: pointer;
  4. height: ?px;
  5. width: ?px;
  6. }

And you're good!

---> For those who like to copy-paste:
Don't forget to delete the extra spaces after the arrows of each tags...

Have fun!

A.

Nin / 2011-12-09 07:13:29   

Naaaaaaaaaa!
I'm not done at all!! :-(

My cursor is invisible on Safari...
And I noticed that on this webiste also, the cursor is not the same in safari... but at least it's not the classic hand, just something different than Firefox...

How can I make my cursor work on each browsers...? Grrr...
(not talking about ie here... froget about this one!)

thx!

Mizake / 2011-12-09 08:37:40   

Ah, so that's the reason...
I tried to do follow your instruction yesterday but nohing happened
(I only checked it on safari...)

:-(

This thread has been closed, thank you.