SitePoint Sponsor

User Tag List

Results 1 to 20 of 20
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Red hand on image instead white in color.

    Hi,

    I have added HTML map on image and it shows white hand on image.

    I want to show hand in red color instead of white.

    Any idea?


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Red Hand on Image</title>
    </head>
    <body>
    	<img src="cup.jpg" width="225" height="225" usemap="#cupmap" border="0" />
    
    	<map name="cupmap">
    		<area shape="rect" coords="67,52,149,178" href="#" alt="Cup">
    </map>
    	
    </body>
    </html>

    - Thanks
    Zohaib.

  2. #2
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,587
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    No, not enough information. Looking at your code I see no hands and no colors. We really need a link to your site so we can tell what is happening.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You can use a custom cursor (an image), than in css use:
    Code:
    img cursor: url(cursor_file.cur),default;
    You can find on the internet about "css custom cursor".
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Sorry forget to attached image cup.jpg and attached with this post.

    I tried but not working for me.

    Could you please give me an example.

    cup.jpg

    I got the file Red Hand Pointer.cur

    I found following but not working for me

    http://www.rw-designer.com/cursor-detail/36604


    - Thanks
    Zohaib.

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried following but not giving result

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Red Hand on Image</title>
    <style type="text/css">
    body {
    	cursor: url(Hand.cur);
    }
    map:hover 
    {
      cursor: url{Hand.cur}, auto;
    }
    </style>
    </head>
    <body>
    
    <a href="#" style="cursor:url{Hand.cur}, auto;">Hand Pointer Pack Cursors</a>
    
    	<img src="cup.jpg" width="225" height="225" usemap="#cupmap" border="0" />
    
    	<map name="cupmap">
    		<area shape="rect" coords="72,53,154,179" href="#" alt="Cup" style="cursor: url{Hand.cur}, auto;"/>
    	</map>
    	
    </body>
    </html>

    http://www.rw-designer.com/cursor-detail/36604

    - Thanks
    Zohaib

  6. #6
    Avid Logophile silver trophy
    ParkinT's Avatar
    Join Date
    May 2006
    Location
    Central Florida
    Posts
    2,343
    Mentioned
    192 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by ronpat View Post
    No, not enough information. Looking at your code I see no hands and no colors. We really need a link to your site so we can tell what is happening.
    After reading the entire thread a few times, it appears the OP wishes the Browser's cursor (hand) to be colored red as opposed to the default white.
    I believe that is embedded in the browser's code and cannot be altered externally (as with CSS).
    Is anyone aware of a technique to include 'custom' cursors?
    Don't be yourself. Be someone a little nicer. -Mignon McLaughlin, journalist and author (1913-1983)


    Git is for EVERYONE
    Literally, the best app for readers.
    Make Your P@ssw0rd Secure
    Leveraging SubDomains

  7. #7
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Which browser(s) are you testing this in? The SitePoint Reference shows that browser support is not consistent.

    Are you sure your file path is correct? i.e. The image is named Hand.cur (not hand.cur or anything else), and is located in the root of your site and not in an image folder or similar.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Your styles are all invalid as you have square brackets where you should have round brackets.

    e.g.
    Code:
    url{Hand.cur}
    It should be:

    Code:
    url(Hand.cur)
    All the code you actually need is this:

    Code:
    <style type="text/css">
    p.cup a {
    	display:block;
    	width:225px;
    	height:225px;
    }
    p.cup a {cursor:url(hand.cur), pointer }
    /* make sure the image is renamed to "hand" */
    </style>
    Code:
    <p class="cup"><a href="#"><img src="cup.jpg" width="225" height="225" alt="Cup" /></a></p>
    No need for an image map and will work ok in IE as I have tested with the red hand image supplied.

  9. #9
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Location
    Argyll, Scotland
    Posts
    6,375
    Mentioned
    268 Post(s)
    Tagged
    5 Thread(s)
    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    Your styles are all invalid as you have square brackets where you should have round brackets.
    I can't believe we all missed that. Must have had too much ginger beer at New Year.



  10. #10
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many Thanks Paul O'B and Guys.

    It is working on image but how to make it working part of image using map on image.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Red Hand</title>
    <style type="text/css">
    p.cup a {
    	display:block;
    	width:225px;
    	height:225px;
    }
    p.cup a {cursor:url(hand.cur), pointer }
    /* make sure the image is renamed to "hand" */
    </style>
    </head>
    
    <body>
    <p class="cup"><a href="#"><img src="cup.jpg" width="225" height="225" alt="Cup"  usemap="#cupmap"/></a></p>
    
    <map name="cupmap">
    	<area shape="rect" coords="64,45,146,171" href="#" alt="Cup" style="cursor:url(hand.cur), pointer"/>
    </map>
    
    </body>
    </html>

    hand.cur can be found at http://www.rw-designer.com/cursor-detail/36604

    -Thanks
    Zohaib.

  11. #11
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Solution is working for image and I need it image map+red hand solution.

    basically in my project I have big image with multiple section.

    I am going to add map on each section and show red hand only when mouse over that section.

    Therefore I need solution with image map + red hand.

    - Thanks
    Zohaib.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I still wouldn't use an image map but simply absolutely place the anchor over the hotspot like so (unless you need irregular shapes and then it would need to be an image map).
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Red Hand</title>
    <style type="text/css">
    p.cup {
    	width:225px;
    	height:225px;
    	position:relative;
    }
    p.cup a {
    	cursor:url(hand.cur), pointer;
    	position:absolute;
    	left:80px;/* adjust to suit */
    	top:100px;/* adjust to suit */
    	width:80px;/* adjust to suit */
    	height:30px;/* adjust to suit */
    	background:green;/* just for testing position - remove when aligned */
    }
    /* make sure the image is renamed to "hand" */
    </style>
    </head>
    <body>
    <p class="cup"><img src="cup.jpg" width="225" height="225" alt="Cup" /><a href="#"></a></p>
    </body>
    </html>

  13. #13
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It is working on section of image.

    I have multiple sections on image and show hand when mouse over that part of image.

    In following example I have 3 awards color image red/blue/white.

    Now when mouse over on each red/blue/whie then I want to show hand.

    I have added red hand on first red color image and how to add for others?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Red Hand</title>
    <style type="text/css">
    p.cup {
    	width:225px;
    	height:225px;
    	position:relative;
    }
    p.cup a {
    	cursor:url(hand.cur), pointer;
    	position:absolute;
    	left:13px;/* adjust to suit */
    	top:18px;/* adjust to suit */
    	width:64px;/* adjust to suit */
    	height:45px;/* adjust to suit */
    	background:#00FF00;	/* just for testing position - remove when aligned */
    }
    
    /* make sure the image is renamed to "hand" */
    </style>
    </head>
    <body>
    <p class="cup"><img src="awards.jpg" alt="Cup" /><a href="#"></a></p>
    </body>
    </html>
    awards.jpg attachedawards.jpg

    hand.cur can be found at http://www.rw-designer.com/cursor-detail/36604

    This awards.jpg image is testing image in actual project I have big image with multiple sections.



    - Thanks
    Zohaib.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have three images so you want three links containing each part of the image so you would have been better off with three images (one for each award) and just linking them in the normal way with no trickery needed at all.

    However, we can use the image as a sprite and put it in the background of the three anchors. I'm assuming that you have three different destinations for each award.

    Here is the revised code:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Red Hand</title>
    <style type="text/css">
    ul.awards {
    	list-style:none;
    	margin:0;
    	padding:0;
    	width:276px;
    	height:182px;
    	float:left;
    }
    ul.awards li, ul.awards a, ul.awards span {
    	width:92px;
    	height:182px;
    	overflow:hidden;
    	position:relative;
    	float:left;
    }
    ul.awards a, ul.awards span { cursor:url(images/hand.cur), pointer; }
    ul.awards span {
    	position:absolute;
    	left:0;
    	top:0;
    	background:url(images/awards.jpg) no-repeat 0 0;
    }
    ul.awards li.award1 span{background-position:0 0}
    ul.awards li.award1 a:hover span{background-position:0 100%}
    
    ul.awards li.award2 span{background-position:-92px 0}
    ul.awards li.award2 a:hover span{background-position:-92px 100%}
    
    ul.awards li.award3 span{background-position:-184px 0}
    ul.awards li.award3 a:hover span{background-position:-184px 100%}
    /* make sure the image is renamed to "hand" */
    </style>
    </head>
    
    <body>
    <ul class="awards">
    		<li class="award1"><a href="#">Award 1<span></span></a></li>
    		<li class="award2"><a href="#">Award 1<span></span></a></li>
    		<li class="award3"><a href="#">Award 1<span></span></a></li>
    </ul>
    </body>
    </html>
    With a live working example here complete with rollover effect using an enlarged sprite.

  15. #15
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My Paul O'B many many thanks for support.

    Please accept my apologize man.

    I have only one big image and 3 to 6 section/part of image need to show hand.

    One image with 6 awards description in each image section/part.

    - Thanks
    Zohaib.

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by zohaib82 View Post
    I have only one big image and 3 to 6 section/part of image need to show hand.

    One image with 6 awards description in each image section/part.

    - Thanks
    Zohaib.
    So that image you supplied had nothing to do with what you wanted? I'm lost now

    You need to rethink what you are doing into a more logical and semantic structure. You can't just paint a big picture and then use an image map (unless it is really for something like a real map).

    Notwithstanding the above the techniques I have showed in all the examples above will still cater for what you need. If you have smaller, larger or more target areas then just adjust the code accordingly to fit.

    You will have to show me the image that you really wanted and then describe where the target areas are supposed to be.

  17. #17
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    I have attached my project image.

    The area where Innovation and security award ,there I want to show red hand on mouse over and link to redirect user.


    - Thanks
    Zohaib.
    Attached Images Attached Images

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here's a simpler documented example that you should be able to follow.:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Red Hand</title>
    <style type="text/css">
    .wrap {
    	width:746px;/* image width */
    	height:121px;/* image height*/
    	position:relative;/* stacking context for absolute anchor*/
    	margin:10px;
    }
    .wrap img {
    	display:block;
    	background:red;/* for testing -please remove */
    }
    .hotspot, .hotspot2, .hotspot3 {
    	position:absolute;
    	left:174px;/* position to fit*/
    	top:20px;/* position to fit*/
    	width:120px;/* size to fit*/
    	height:50px;/* size to fit*/
    	background:green;/* for testing -please remove */
    	text-decoration:none;
    	cursor:url(images/hand.cur), pointer;
    }
    .hotspot3 {
    	left:400px;
    	top:50px;
    }
    </style>
    </head>
    
    <body>
    <div class="wrap"><img src="" width="746" height="121" alt="image description" /><a class="hotspot" href="#"></a></div>
    <div class="wrap"><img src="" width="746" height="121" alt="image description" /><a class="hotspot2" href="#"></a><a class="hotspot3" href="#"></a></div>
    </body>
    </html>
    Just adjust the positions, size etc to fit your requirements. Add more hotspots as required by using more classes as shown in the second example. The example has everything you need to do what you want so have a go for your self and if you are still stuck then post back with the code that you have been trying and we will point you in the right direction.

  19. #19
    SitePoint Enthusiast
    Join Date
    Nov 2012
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul O'B,

    Many thanks for support.


    Currently If I remove green background then red hand on image area not coming and I want to show red hand on different area of image with link to redirect.

    I want to know how to remove green background and add red hand on "Innovation Award" and "Security Award"

    I have attached all files with example in following ulr and please check file "awardslatest2.htm"

    https://www.dropbox.com/s/u3etd5ui7qyp5u0/redHand.rar


    - Thanks
    Zohaib.

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It;s working everywhere apart from a bug in IE.

    Add a 1px transparent gif image to the background here to make it work.

    Code:
    .hotspot, .hotspot2, .hotspot3 {
    	position:absolute;
    	left:174px;/* position to fit*/
    	top:20px;/* position to fit*/
    	width:120px;/* size to fit*/
    	height:50px;/* size to fit*/
    	text-decoration:none;
    	cursor:url(images/hand.cur), pointer;
    	background:url(fake.gif) no-repeat -1px -1px;
    }
    The fake image doesn't have to exist for this to work but its better to make a 1px x 1px transparent gif to avoid missing image server log errors.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •