php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Jobs und Projekte > Projekthilfe
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


Projekthilfe Hier könnt Ihr eine Art Projekthilfe anfordern. Unter Projekthilfe verstehen wir Angebote bei denen KEIN Geld gezahlt werden kann.

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 22-09-2010, 13:44
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard image map mit js

hallo,:
kann leider kein flash, deswegen nutze ich die image map funktion von jquery. leider komm ich hier nicht weiter:

habe folgenden code von der demo seite.

PHP-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>jQuery Tooltip Plugin Demo</title>

<
link rel="stylesheet" href="http://jquery.bassistance.de/tooltip/jquery.tooltip.css" />
<
link rel="stylesheet" href="css/tip.css" />
<
script src="http://jquery.bassistance.de/tooltip/lib/jquery.jstype="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/jquery.tooltip.js" type="text/javascript"></script>
<script src="http://jquery.bassistance.de/tooltip/demo/chili-1.7.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("map > area").tooltip({ positionLeft: true });
$("#block").click($.tooltip.block);
});
</script>

</head>
<body>

        
    
        <img id="map" src="karte.png" border="0" usemap="#Landkarte">

        <map name="Landkarte">
          <area shape="rect" coords="11,10,59,29"
                href="http://www.koblenz.de/" alt="Koblenz" title="ssKoblenz">
          <area shape="rect" coords="42,36,96,57"
                href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
          <area shape="rect" coords="42,59,78,80"
                href="http://www.mainz.de/" alt="Mainz" title="Mainz">
          <area shape="rect" coords="100,26,152,58"
                href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
          <area shape="rect" coords="27,113,93,134"
                href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
          <area shape="rect" coords="100,138,163,159"
                href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
          <area shape="rect" coords="207,77,266,101"
                href="http://www.wuerzburg.de/" alt="W&uuml;rzburg" title="W&uuml;rzburg">
          <area shape="rect" coords="282,62,344,85"
                href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">

          <area shape="rect" coords="255,132,316,150"
                href="http://www.nuernberg.de/" alt="N&uuml;rnberg" title="N&uuml;rnberg">
          <area shape="rect" coords="78,182,132,200"
                href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
          <area shape="rect" coords="142,169,200,193"
                href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
          <area shape="rect" coords="140,209,198,230"
                href="#ssdfsdf" alt="Stuttgart" title="Stutssstgart<br>ds">
          <area shape="rect" coords="187,263,222,281"
                href="http://www.ulm.de/" alt="Ulm" title="Ulm">
          <area shape="rect" coords="249,278,304,297"
                href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
          <area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
                href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
        </map> 
siehe jQuery Tooltip Plugin Demo

mein problem ist folgendes: ich will eine definierte div box "anzeigen" lassen und nicht das href="" teil.

leider hab ich davon eher weniger ahnung

wäre super wenn mich da jemand unterstuetzen koennte.

stellt euch auf einen javascript neuling ein
Mit Zitat antworten
  #2 (permalink)  
Alt 22-09-2010, 14:22
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

diese tooltip Library leistet das nicht, was du willst. Dafür müsste sie umgeschrieben werden. Machst du das aus Spaß, um JS zu lernen oder hast du ein dringendes Projekt?

Wenn du nur übst, vergiss JQuery und lerne JavaScript-Grundlagen. Wenn du die drauf hast, kannst du dir mit JQuery das Leben leichter machen, auch wenn du JQuery dann nicht mehr brauchst.

Für Anfänger ist JQuery nur so weit geeignet, wie man bereit ist, sich auf die bereits eingebaute Funktionalität zu beschränken. Man kommt also schnell zum Ziel und es gibt nette Features, aber es wird nie alles das leisten, was du dir an Features wünschst.

Wenn du das für ein Projekt brauchst, mach besser ein Jobangebot draus.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 22-09-2010, 14:59
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

ja, ist eigentlich dringend, sogar sehr.


werde mich auf jedenfall mit JS genauer beschäftigen, aber jetzt müsste ich das leider umsetzen.

bräuchte ja nur einen tip wie ich das umsetzen kann.
es als jobangebot einzustellen mache ich her ungern, so leid es mir tut.

vielleicht weiss doch schnell jemand eine lösung, das wäre super!

Geändert von svr (22-09-2010 um 15:01 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 22-09-2010, 15:13
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Wie soll denn das div / der Tooltip aussehen? Bisher hast du noch keine brauchbaren Infos geliefert. Daher kann ich momentan nur sagen: In der tooltip.js Zeile 48 bis 63 abändern.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 22-09-2010, 15:25
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

hallo,
dank dir fuer deine antwort!

es soll ganz einfach sein. ich moechte pro "bildpunkt" je eine div laden lassen

(vom text her wie hier Image Map with Prototype Tooltips | CSS-Tricks kriege das aber nicht hin)

die div kann ich ja dnan mittels css beliebig stylen.

es geht nur darum, dass in die div einiges rein muss.
extras wie verzögerung etc brauch ich eigentlich nicht. es soll eben eine div sein, sodass ich das ganze dann stylen kann.

wichtig wäre IE kompatibilität, aber die ist bei jquery ja gegeben.

danke!
Mit Zitat antworten
  #6 (permalink)  
Alt 22-09-2010, 15:35
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hol dir einfach das div mit der id tooltip und schreib dort rein, was immer du willst, am besten onmouseover.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 22-09-2010, 15:56
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

tut mir leid, das verstehe ich geradde nicht.

reden wir von meinem geposteten link oder jquery.

ich weiss, es ist viel verlangt, aber das ganze mit code wäre am besten

danke!
Mit Zitat antworten
  #8 (permalink)  
Alt 25-09-2010, 12:59
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

wirklich keiner eine idee?
Mit Zitat antworten
  #9 (permalink)  
Alt 26-09-2010, 01:54
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Die Idee hast du schon von mir bekommen. Wo hapert es genau? Hast du dir das div mit der ID „tooltip“ schon mal angesehen? Wenn nicht, kennst du document.getElementById() und die anderen tollen Methoden zur DOM-Manipulation schon?

Ist immer noch etwas unklar? Dann poste bitte deinen eigenen Ansatz und stelle konkrete Fragen zu den Stellen, wo du nicht weiter kommst.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #10 (permalink)  
Alt 27-09-2010, 11:18
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von AmicaNoctis Beitrag anzeigen
Hol dir einfach das div mit der id tooltip und schreib dort rein, was immer du willst, am besten onmouseover.
welches div, weshakb onmouseover??

habe von der seite das mal genommen und das gebastelt.

PHP-Code:
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='prototip.js'></script>
<script type='text/javascript'>
    function init() {
    //<![CDATA[
        new Tip('tooltip-1', '<h3>Content for Tooltip 1</h3>', 
{title : '', className: 'silver', effect: 'slide', showOn: 'mousemove',
 hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
        new Tip('tooltip-2', '<h3>Content for Tooltip 2</h3>',
 {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', 
hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
    //]]>
    }
    Event.observe(window, 'load', init, false);
</script>
<style type="text/css">
.prototip                 { position: absolute; }
.prototip .silver             { width: 733px; font-size: 1.8em; }
.prototip .silver .content         { text-align: center; padding: 10px 0; }

</style>


<img src="karte.png" alt="image" usemap="#Map" />
<map name="Map" id="Map">
    <area shape="circle" coords="4,4,4" href="#" id="tooltip-1"/>
    <area shape="circle" coords="178,169,12" href="#" id="tooltip-2" />
</map> 
aber das wahrscheinlich müll

danke
Mit Zitat antworten
  #11 (permalink)  
Alt 27-09-2010, 13:01
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

wenn du dir diese Tooltip Demo nochmal ansiehst, wirst du feststellen, dass die jquery.tooltip.js mittels einer Funktion createHelper (95–114) ein div am Ende des Dokuments einfügt, was erstmal so aussieht:

HTML-Code:
<div id="tooltip" style="display: none;">
    <h3></h3>
    <div class="body"></div>
    <div class="url"></div>
</div>
Wenn du dann mit der Maus über eine Stadt hoverst (entspricht dem Event onmouseover), wird dieses div mit Leben gefüllt:
  1. h3 bekommt den Namen der Stadt
  2. in div.url wird die Adresse eingetragen
  3. div#tooltip selbst wird positioniert und auf display: block gesetzt

Dadurch siehst du es als Tooltip. Beim Verlassen der Stadt mit dem Mauszeiger (also onmouseout) wird es mit display: none wieder unsichtbar geschaltet, bleibt dabei aber gefüllt, bis es beim nächsten onmouseover mit neuen Werten überschrieben wird.

Wenn du jetzt auch einen eigenen onmouseover-Handler dazu bastelst, der den anderen aber nicht behindern darf, kannst du das ganze Ding beliebig umbauen oder einfach div.body füllen, was ja im Moment nicht benutzt wird. Damit wäre dein Problem gelöst.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #12 (permalink)  
Alt 27-09-2010, 20:50
svr
 Registrierter Benutzer
Links : Onlinestatus : svr ist offline
Registriert seit: Mar 2010
Beiträge: 60
svr befindet sich auf einem aufstrebenden Ast
Standard

ich weiss es ist viel verlangt, aber könntest du mir mit etwas code dabei helfen.
ich bin wie gesagt neuling auf dem gebiet, habe aber leider druck, dass das fertig wird.

sobald ich da shinter mir habe, werde ich mich sofort da ran setzen, das verspreche ich.


wäre super, wenn das ginge. vielleicht kann ich dir auch bei etwas helfen?

vielen dank!
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
[image] auf die erzeugte image nen link schreiben ThaDafinser HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 16-12-2005 11:34
image map thea HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 5 05-04-2005 15:10
image upload (funkt) und image resize (funkt nicht) meikl PHP Developer Forum 9 20-12-2004 23:11
Image... Damian1984 PHP Developer Forum 6 26-03-2003 12:03
background-image:url(image.gif); unter windows XP callt HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 1 18-02-2003 08:31

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 22:09 Uhr.