• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Map / Area und Icon Tooltip

B

Boldo

Guest
Guten Tag an alle im Forum .

Ich habe mir via eines Editors eine Images Map Karte erstellt .
Diese funktioniert perfekt !
HTML: 
<img src="gfx/woodmap.png" usemap="#image-map">
<map name="image-map">
<area shape="rect" alt="" title="" coords="166,110,172,138" href="" target="" />
</map>

Mein Problem ist nur das ich auf der Karte wo die jeweiligen Markierungen sind gerne einen Icon 'ala' GoogleMaps angezeigt haben möchte .
Habe gleichnamige Suche gefüllt und befragt aber alles brachte kein Erfolg .
Ich hoffe ich kann hier Hilfe bekommen.


Beste Grüße

Boldo
 
Werbung:
Sollen immer angezeigt werden .

Perfekt wäre es wenn ich auf so ein Icon gehe und dann sich ein Tooltip Box öffnet :)
 
Naja eine einfache Lösung wäre so etwas , " Tooltip "

tooltip.css
Code: 
abbr
{
        border-bottom: 1px dotted #666;
    cursor: help;
}

.tooltip
{
    position:absolute;
    background-color:#eeeefe;
    border: 1px solid #aaaaca;
    font-size: smaller;
    padding:4px;
    width: 160px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);   
}

[URL='https://gist.github.com/csasbach/867744#file-tooltip-html']tooltip.html
HTML: 
<!DOCTYPE html>
<html>
<head>   
    <link rel="stylesheet" href="tooltip.css" />
</head>
<body>
    <p>For a tooltip hover or click <abbr title="This text will show up in your tooltip!">here</abbr>.</p>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js'></script>
    <script type='text/javascript' src='touchHover.js'></script>
</body>
</html>
[URL='https://gist.github.com/csasbach/867744#file-touchhover-js']touchHover.js
Code: 
$(document).ready(function() {   
    
    $('abbr').each(function(){       
        
        $(this).data('title',$(this).attr('title'));
        $(this).removeAttr('title');
    
    });

    $('abbr').mouseover(function() {       
        
        // first remove all existing abbreviation tooltips
        $('abbr').next('.tooltip').remove();
        
        // create the tooltip
        $(this).after('<span class="tooltip">' + $(this).data('title') + '</span>');
        
        // position the tooltip 4 pixels above and 4 pixels to the left of the abbreviation
        var left = $(this).position().left + $(this).width() + 4;
        var top = $(this).position().top - 4;
        $(this).next().css('left',left);
        $(this).next().css('top',top);               
        
    });
    
    $('abbr').click(function(){
        
        $(this).mouseover();
        
        // after a slight 2 second fade, fade out the tooltip for 1 second
        $(this).next().animate({opacity: 0.9},{duration: 2000, complete: function(){
            $(this).fadeOut(1000);
        }});
        
    });
    

    $('abbr').mouseout(function(){
            
        $(this).next('.tooltip').remove();               

    });   
    
});

[/URL]
[/URL]
Damit wäre auch dann jetzt geklärt was ich mit ...
"wenn ich auf so ein Icon gehe"
Zum Vergrößern anklicken....
meine , so und nun gehen wir noch mal einen Schritt weiter , da wir hier ja in einem Forum sind wo um des Codes willen geht, und nicht schreibe um zu klären was ich wie in welcher Aussage meine . Oder Beratung über Geräte bekommen will wie sie heute in vielen Bereichen genutzt werden , die über viele verschiedene weise funktionieren wie etwa : Oberflächen-kapazitive Systeme, SAW (Surface Acoustic Wave), Projiziert-kapazitive Systeme, Resistive Systeme, Induktive Systeme, Dispersive-Signal-Technology-System .

Also ist hier auch jemand der Aktiv an der Lösung Arbeiten kann , und mich nicht über Schreibweisen zu Labern will . Oder mir erklären was mit Hover / Mouseover und oder anderen diversen Ajax , Javascript oder sonstigem "Zu Texten" will.
 
Werbung:
Werbung:
Boldo schrieb:
wenn ich freunde suche , dann gehe ich ins reale leben . Oder suche mir welche bei facebook
Zum Vergrößern anklicken....
Genau, suche dir Freund bei Facebook, weil die sind ja auch so real.

Ich denke, du kannst diesen Thread hier getrost vergessen, nach deinen Kommentaren wird hier niemand mehr seine Zeit opfern, um dir zu helfen. Vielleicht kann dir ja ein Freund helfen. :p
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben