cluetip on an imagemap troubles

classic Classic list List threaded Threaded
11 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

cluetip on an imagemap troubles

nEo-19

Hi,

I have an image map marked with areas. I am having trouble in passing
the dynamic values to the ajax script.

My image map is like this

<map name="USAMap" id="USAMap">
<area shape="poly"
coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
class="USAstates" name="CA" title="California State" href="CA-
california.html" />
<area shape="poly" coords="88,111,99,62,40,48,23,95" class="USAstates"
name="OR" title="in Oregon State" href="OR-oregon.html" />
<area shape="poly" coords="98,61,106,22,60,10,41,15,39,47"
class='USAstates' name='WA' title='Washington State'  href='WA-
washington.html' />
</map>

my jquery script is this.

<script language="javascript" >

$(document).ready(function() {
$('area.USAstates').each( function () {
                var statekey = $(this).attr("name").toString();
       //alert('statekey =' + statekey );
            $(".USAStates").attr("rel","ajaxsearch.php").cluetip({
              showTitle: true,
              closePosition : "title",
    sticky : true,
    hoverIntent: {
                      sensitivity:  7,
                      interval:     500,
                      timeout:      100
    },
              ajaxCache:  false,
    ajaxSettings : {
      type : "POST",
      data : "state=" + statekey
    },
    ajaxProcess : function (data) {
      return "<div>" + data + "</div>";
    }
  });
        });
});
</script>

Can some one assist me?

Thank you.

Regards
Neo M
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

nEo-19

Hi,

I tried using id (#usamap). It created the cluetip, but everything was
running in a loop...

Please help.

On Feb 29, 10:26 pm, nEo <[hidden email]> wrote:

> Hi,
>
> I have an image map marked with areas. I am having trouble in passing
> the dynamic values to the ajax script.
>
> My image map is like this
>
> <map name="USAMap" id="USAMap">
> <area shape="poly"
> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
> class="USAstates" name="CA" title="California State" href="CA-
> california.html" />
> <area shape="poly" coords="88,111,99,62,40,48,23,95" class="USAstates"
> name="OR" title="in Oregon State" href="OR-oregon.html" />
> <area shape="poly" coords="98,61,106,22,60,10,41,15,39,47"
> class='USAstates' name='WA' title='Washington State'  href='WA-
> washington.html' />
> </map>
>
> my jquery script is this.
>
> <script language="javascript" >
>
> $(document).ready(function() {
> $('area.USAstates').each( function () {
>                 var statekey = $(this).attr("name").toString();
>        //alert('statekey =' + statekey );
>             $(".USAStates").attr("rel","ajaxsearch.php").cluetip({
>                 showTitle: true,
>                 closePosition : "title",
>                 sticky : true,
>                 hoverIntent: {
>                       sensitivity:  7,
>                       interval:     500,
>                       timeout:      100
>                                         },
>                 ajaxCache:  false,
>                 ajaxSettings : {
>                 type : "POST",
>                 data : "state=" + statekey
>                 },
>                 ajaxProcess : function (data) {
>                         return "<div>" + data + "</div>";
>                 }
>                 });
>         });});
>
> </script>
>
> Can some one assist me?
>
> Thank you.
>
> Regards
> Neo M
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Karl Swedberg-2

Hi nEo,

Sorry for the delay in getting back to you. I'm going to devote some  
time this weekend to looking into your problem and will report back as  
soon as I've discovered something.


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Mar 5, 2008, at 11:45 PM, nEo wrote:

>
> Hi,
>
> I tried using id (#usamap). It created the cluetip, but everything was
> running in a loop...
>
> Please help.
>
> On Feb 29, 10:26 pm, nEo <[hidden email]> wrote:
>> Hi,
>>
>> I have an image map marked with areas. I am having trouble in passing
>> the dynamic values to the ajax script.
>>
>> My image map is like this
>>
>> <map name="USAMap" id="USAMap">
>> <area shape="poly"
>> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
>> class="USAstates" name="CA" title="California State" href="CA-
>> california.html" />
>> <area shape="poly" coords="88,111,99,62,40,48,23,95"  
>> class="USAstates"
>> name="OR" title="in Oregon State" href="OR-oregon.html" />
>> <area shape="poly" coords="98,61,106,22,60,10,41,15,39,47"
>> class='USAstates' name='WA' title='Washington State'  href='WA-
>> washington.html' />
>> </map>
>>
>> my jquery script is this.
>>
>> <script language="javascript" >
>>
>> $(document).ready(function() {
>> $('area.USAstates').each( function () {
>>                 var statekey = $(this).attr("name").toString();
>>        //alert('statekey =' + statekey );
>>             $(".USAStates").attr("rel","ajaxsearch.php").cluetip({
>>                 showTitle: true,
>>                 closePosition : "title",
>>                 sticky : true,
>>                 hoverIntent: {
>>                       sensitivity:  7,
>>                       interval:     500,
>>                       timeout:      100
>>                                         },
>>                 ajaxCache:  false,
>>                 ajaxSettings : {
>>                 type : "POST",
>>                 data : "state=" + statekey
>>                 },
>>                 ajaxProcess : function (data) {
>>                         return "<div>" + data + "</div>";
>>                 }
>>                 });
>>         });});
>>
>> </script>
>>
>> Can some one assist me?
>>
>> Thank you.
>>
>> Regards
>> Neo M

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Karl Swedberg-2
In reply to this post by nEo-19

Hi nEo, I've used the clueTip with areas before. Not sure what the  
problem is for you anymore. Can you maybe post a test page somewhere?  
Here is an example of a page that has a clueTip appear on hovering  
over an area. It uses a local element for the content, but it should  
basically work the same way. Unless the problem is with your ajax  
stuff, but I don't see anything obviously wrong there.

http://test.learningjquery.com/clue/chic-test.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Mar 5, 2008, at 11:45 PM, nEo wrote:

>
> Hi,
>
> I tried using id (#usamap). It created the cluetip, but everything was
> running in a loop...
>
> Please help.
>
> On Feb 29, 10:26 pm, nEo <[hidden email]> wrote:
>> Hi,
>>
>> I have an image map marked with areas. I am having trouble in passing
>> the dynamic values to the ajax script.
>>
>> My image map is like this
>>
>> <map name="USAMap" id="USAMap">
>> <area shape="poly"
>> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
>> class="USAstates" name="CA" title="California State" href="CA-
>> california.html" />
>> <area shape="poly" coords="88,111,99,62,40,48,23,95"  
>> class="USAstates"
>> name="OR" title="in Oregon State" href="OR-oregon.html" />
>> <area shape="poly" coords="98,61,106,22,60,10,41,15,39,47"
>> class='USAstates' name='WA' title='Washington State'  href='WA-
>> washington.html' />
>> </map>
>>
>> my jquery script is this.
>>
>> <script language="javascript" >
>>
>> $(document).ready(function() {
>> $('area.USAstates').each( function () {
>>                 var statekey = $(this).attr("name").toString();
>>        //alert('statekey =' + statekey );
>>             $(".USAStates").attr("rel","ajaxsearch.php").cluetip({
>>                 showTitle: true,
>>                 closePosition : "title",
>>                 sticky : true,
>>                 hoverIntent: {
>>                       sensitivity:  7,
>>                       interval:     500,
>>                       timeout:      100
>>                                         },
>>                 ajaxCache:  false,
>>                 ajaxSettings : {
>>                 type : "POST",
>>                 data : "state=" + statekey
>>                 },
>>                 ajaxProcess : function (data) {
>>                         return "<div>" + data + "</div>";
>>                 }
>>                 });
>>         });});
>>
>> </script>
>>
>> Can some one assist me?
>>
>> Thank you.
>>
>> Regards
>> Neo M

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

ripple_27
That would be really nice if the mouseout would make the clueTip disappear.
 
 
 
 
 
 
 


Karl Swedberg <[hidden email]> wrote:

Hi nEo, I've used the clueTip with areas before. Not sure what the
problem is for you anymore. Can you maybe post a test page somewhere?
Here is an example of a page that has a clueTip appear on hovering
over an area. It uses a local element for the content, but it should
basically work the same way. Unless the problem is with your ajax
stuff, but I don't see anything obviously wrong there.

http://test.learningjquery.com/clue/chic-test.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Mar 5, 2008, at 11:45 PM, nEo wrote:

>
> Hi,
>
> I tried using id (#usamap). It created the cluetip, but everything was
> running in a loop...
>
> Please help.
>
> On Feb 29, 10:26 pm, nEo wrote:
>> Hi,
>>
>> I have an image map marked with areas. I am having trouble in passing
>> the dynamic values to the ajax script.
>>
>> My image map is like this
>>
>>
>> >> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
>> class="USAstates" name="CA" title="California State" href="CA-
>> california.html" />
>> >> class="USAstates"
>> name="OR" title="in Oregon State" href="OR-oregon.html" />
>> >> class='USAstates' name='WA' title='Washington State' href='WA-
>> washington.html' />
>>

>>
>> my jquery script is this.
>>
>> <SCRIPT language=javascript><br>>><br>>> $(document).ready(function() {<br>>> $('area.USAstates').each( function () {<br>>> var statekey = $(this).attr("name").toString();<br>>> //alert('statekey =' + statekey );<br>>> $(".USAStates").attr("rel","ajaxsearch.php").cluetip({<br>>> showTitle: true,<br>>> closePosition : "title",<br>>> sticky : true,<br>>> hoverIntent: {<br>>> sensitivity: 7,<br>>> interval: 500,<br>>> timeout: 100<br>>> },<br>>> ajaxCache: false,<br>>> ajaxSettings : {<br>>> type : "POST",<br>>> data : "state=" + statekey<br>>> },<br>>> ajaxProcess : function (data) {<br>>> return "<div>" + data + "</div>";<br>>> }<br>>> });<br>>> });});<br>>><br>>> </SCRIPT>
>>
>> Can some one assist me?
>>
>> Thank you.
>>
>> Regards
>> Neo M



Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Karl Swedberg-2
ok, I'm feeling like a real idiot now, because I can't see any evidence of a clueTip on that page. Would you mind pointing out the obvious to me? Thanks.


--Karl
_________________
Karl Swedberg



On Mar 10, 2008, at 10:12 PM, ripple wrote:

That would be really nice if the mouseout would make the clueTip disappear.
 
 
 
 
 
 
 


Karl Swedberg <[hidden email]> wrote:

Hi nEo, I've used the clueTip with areas before. Not sure what the
problem is for you anymore. Can you maybe post a test page somewhere?
Here is an example of a page that has a clueTip appear on hovering
over an area. It uses a local element for the content, but it should
basically work the same way. Unless the problem is with your ajax
stuff, but I don't see anything obviously wrong there.

http://test.learningjquery.com/clue/chic-test.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Mar 5, 2008, at 11:45 PM, nEo wrote:

>
> Hi,
>
> I tried using id (#usamap). It created the cluetip, but everything was
> running in a loop...
>
> Please help.
>
> On Feb 29, 10:26 pm, nEo wrote:
>> Hi,
>>
>> I have an image map marked with areas. I am having trouble in passing
>> the dynamic values to the ajax script.
>>
>> My image map is like this
>>
>> >> >> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210">> class="USAstates" name="CA" title="California State" href="CA->> california.html" />>> >> class="USAstates">> name="OR" title="in Oregon State" href="OR-oregon.html" />>> >> class='USAstates' name='WA' title='Washington State' href='WA->> washington.html' />>>
>>
>> my jquery script is this.
>>
>> <script language="javascript"><br>>><br>>> $(document).ready(function() {<br>>> $('area.USAstates').each( function () {<br>>> var statekey = $(this).attr("name").toString();<br>>> //alert('statekey =' + statekey );<br>>> $(".USAStates").attr("rel","ajaxsearch.php").cluetip({<br>>> showTitle: true,<br>>> closePosition : "title",<br>>> sticky : true,<br>>> hoverIntent: {<br>>> sensitivity: 7,<br>>> interval: 500,<br>>> timeout: 100<br>>> },<br>>> ajaxCache: false,<br>>> ajaxSettings : {<br>>> type : "POST",<br>>> data : "state=" + statekey<br>>> },<br>>> ajaxProcess : function (data) {<br>>> return "<div>" + data + "</div>";<br>>> }<br>>> });<br>>> });});<br>>><br>>> </script>
>>
>> Can some one assist me?
>>
>> Thank you.
>>
>> Regards
>> Neo M




Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

ripple_27
lol. There were only two or maybe 3.
 
 
 
 


Karl Swedberg <[hidden email]> wrote:
ok, I'm feeling like a real idiot now, because I can't see any evidence of a clueTip on that page. Would you mind pointing out the obvious to me? Thanks.


--Karl
_________________
Karl Swedberg



On Mar 10, 2008, at 10:12 PM, ripple wrote:

That would be really nice if the mouseout would make the clueTip disappear.
 
 
 
 
 
 
 


Karl Swedberg <[hidden email]> wrote:

Hi nEo, I've used the clueTip with areas before. Not sure what the
problem is for you anymore. Can you maybe post a test page somewhere?
Here is an example of a page that has a clueTip appear on hovering
over an area. It uses a local element for the content, but it should
basically work the same way. Unless the problem is with your ajax
stuff, but I don't see anything obviously wrong there.

http://test.learningjquery.com/clue/chic-test.html


--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Mar 5, 2008, at 11:45 PM, nEo wrote:

>
> Hi,
>
> I tried using id (#usamap). It created the cluetip, but everything was
> running in a loop...
>
> Please help.
>
> On Feb 29, 10:26 pm, nEo wrote:
>> Hi,
>>
>> I have an image map marked with areas. I am having trouble in passing
>> the dynamic values to the ajax script.
>>
>> My image map is like this
>>
>> >> >> coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210">> class="USAstates" name="CA" title="California State" href="CA->> california.html" />>> >> class="USAstates">> name="OR" title="in Oregon State" href="OR-oregon.html" />>> >> class='USAstates' name='WA' title='Washington State' href='WA->> washington.html' />>>
>>
>> my jquery script is this.
>>
>> <SCRIPT language=javascript><br>>><br>>> $(document).ready(function() {<br>>> $('area.USAstates').each( function () {<br>>> var statekey = $(this).attr("name").toString();<br>>> //alert('statekey =' + statekey );<br>>> $(".USAStates").attr("rel","ajaxsearch.php").cluetip({<br>>> showTitle: true,<br>>> closePosition : "title",<br>>> sticky : true,<br>>> hoverIntent: {<br>>> sensitivity: 7,<br>>> interval: 500,<br>>> timeout: 100<br>>> },<br>>> ajaxCache: false,<br>>> ajaxSettings : {<br>>> type : "POST",<br>>> data : "state=" + statekey<br>>> },<br>>> ajaxProcess : function (data) {<br>>> return "<div>" + data + "</div>";<br>>> }<br>>> });<br>>> });});<br>>><br>>> </SCRIPT>
>>
>> Can some one assist me?
>>
>> Thank you.
>>
>> Regards
>> Neo M




Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.



Be a better friend, newshound, and know-it-all with Yahoo! Mobile. Try it now.
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Wil Everts
In reply to this post by Karl Swedberg-2
Hey, I think I understand what ripple is saying, but it took me a moment or three... I think he is saying that it would be nice if the tooltip on your sample disappeared on mouseout. The link must be his signature.

This might help you in your hacking endeavors. This is a simple hover on/off "tooltip" style function using jquery:

$(document).ready(function(){

  $("a.tooltip").hover(function(e) { // on mouseover of an a tag with the class of tooltip

    //set the coordinates to the mouse location and show
    $("#tip").css("left", (e.pageX+10));
    $("#tip").css("top", (e.pageY+10));
    $("#tip").show('fast');
       
  }, function() {
       
    $("#tip").hide('fast'); // make the hover tip go away on mouseout!   
       
  });

});


<div id="tip" style="display:none;">
    <p>Here ya go!</p>
    <p>&nbsp;</p>
</div>
   
<div id="list">
    <ul>
        <li><a class="tooltip">Option 1</a></li>
        <li><a class="tooltip">Option 2</a></li>
        <li><a class="tooltip">Option 3</a></li>
        <li><a class="tooltip">Option 4</a></li>
    </ul>
</div>

(demo http://www.wil1.com/jtesting/index.html)

Wil Everts
[hidden email]
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Karl Swedberg-2
Thanks for the clarification, Wil. 

Ripple, 

You can see a number of options demonstrated here: http://plugins.learningjquery.com/cluetip/demo/

Default theme examples 1-3 display the tooltip on mousing over the invoking element (usually a link) and close it on mousing out of that element.

Default theme example 4 has a "sticky" tooltip that requires you to close it manually (it will also close if you display another tooltip).

Scroll down to jTip theme example 1 for a tooltip that will stay displayed until you either close it manually or mouse out of the tooltip.

I hope those options cover what you're looking for.


--Karl
_________________
Karl Swedberg



On Mar 10, 2008, at 11:41 PM, Wil Everts wrote:

Hey, I think I understand what ripple is saying, but it took me a moment or three... I think he is saying that it would be nice if the tooltip on your sample disappeared on mouseout. The link must be his signature.

This might help you in your hacking endeavors. This is a simple hover on/off "tooltip" style function using jquery:

$(document).ready(function(){

  $("a.tooltip").hover(function(e) { // on mouseover of an a tag with the class of tooltip

    //set the coordinates to the mouse location and show
    $("#tip").css("left", (e.pageX+10));
    $("#tip").css("top", (e.pageY+10));
    $("#tip").show('fast');
       
  }, function() {
       
    $("#tip").hide('fast'); // make the hover tip go away on mouseout!   
       
  });

});


<div id="tip" style="display:none;">
    <p>Here ya go!</p>
    <p>&nbsp;</p>
</div>
   
<div id="list">
    <ul>
        <li><a class="tooltip">Option 1</a></li>
        <li><a class="tooltip">Option 2</a></li>
        <li><a class="tooltip">Option 3</a></li>
        <li><a class="tooltip">Option 4</a></li>
    </ul>
</div>

(demo http://www.wil1.com/jtesting/index.html)

Wil Everts
[hidden email]

Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

foxQuery
In reply to this post by Karl Swedberg-2
clueTip can handle also image maps fine (MAP AREA).
There still exists interesting problem with IE6 and IE7.
If you do not include hoverintent.js those IEs do not show tooltips at all!
Other browsers are still showing tooltips without hoverintent.js too!
I do not know actual reason for that, but .....

If you remove hoverintent.js from this examble
  http://test.learningjquery.com/clue/chic-test.html
then image map does not work anymore!

So  -  try to include hoverintent.js allways with image map.

atFox
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: cluetip on an imagemap troubles

Bindus
In reply to this post by nEo-19
Hello Neo , were you able to solve this?

I am also working on imagemap with cluetip.I am also facing similar problem. For me its just showing the last mapname in the ajax script.

thanks
Bindu

nEo-19 wrote
Hi,

I have an image map marked with areas. I am having trouble in passing
the dynamic values to the ajax script.

My image map is like this

<map name="USAMap" id="USAMap">
<area shape="poly"
coords="52,143,60,106,23,96,14,137,38,208,83,244,92,210"
class="USAstates" name="CA" title="California State" href="CA-
california.html" />
<area shape="poly" coords="88,111,99,62,40,48,23,95" class="USAstates"
name="OR" title="in Oregon State" href="OR-oregon.html" />
<area shape="poly" coords="98,61,106,22,60,10,41,15,39,47"
class='USAstates' name='WA' title='Washington State'  href='WA-
washington.html' />
</map>

my jquery script is this.

<script language="javascript" > $(document).ready(function() { $('area.USAstates').each( function () { var statekey = $(this).attr("name").toString(); //alert('statekey =' + statekey ); $(".USAStates").attr("rel","ajaxsearch.php").cluetip({ showTitle: true, closePosition : "title", sticky : true, hoverIntent: { sensitivity: 7, interval: 500, timeout: 100 }, ajaxCache: false, ajaxSettings : { type : "POST", data : "state=" + statekey }, ajaxProcess : function (data) { return "<div>" + data + "</div>"; } }); }); }); </script>
Can some one assist me?

Thank you.

Regards
Neo M
Loading...