php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 05-06-2007, 16:28
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard [JavaScript] Hover auf ner Imagemap - Bild und Text

Hallo,

ich möchte mit nem Javascript auf ner Bildmap so nen link setzen, dass wenn man drüber fährt, dass beim darüberfahren, also solange man auf der map bleibt ein feld offen bleibt, wo ein beschreibender text drinnen ist und wo ich in diesem feld auch ein detail bild zeigen kann. danke.
weiß jemand wo man so ein script finden kann? bin leider bei google und im forum nicht fündig geworden.


lg
tjabo
Mit Zitat antworten
  #2 (permalink)  
Alt 05-06-2007, 16:32
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Nochmal langsam.

du hast eine image map?
du willst das wenn man auf einen bereich der image map mit der maus fährt ein "schwebendes fenster" gezeigt wird?
das "schwebende fenster" soll je nach "maus drüber"-Bereich verschiedene Inhalte haben?

Das geht ohne JS - pures CSS
Mit Zitat antworten
  #3 (permalink)  
Alt 05-06-2007, 16:41
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard

jap, genau das möchte ich... mit css? danke erstmal fürs besser formulieren kannste mir nen link geben, wo ich infos darüber finde? dankeschön schon im vorraus.
ach ja und danke für die ultraschnelle antwort
Mit Zitat antworten
  #4 (permalink)  
Alt 05-06-2007, 16:58
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard

mal grob ein Beispiel:

PHP-Code:
<ul class="mymap">
  <
li>
    <
a href="#" id="link1"><span>Text/Bild/was du wilst</span></a>
  </
li>
</
ul>


//CSS dazu
UL.mymap {
  
width400px;
  
height200px/* höhe und breite deines Bilder */
  
padding0;
  
background-imageurl('meins.jpg');
}

UL.mymap LI {
  list-
style-typenone;
}

UL.mymap LI A {
  
displayblock;
  
positionrelative;
}

html UL.mymap LI A 
  
/*Hack für IE6, damit er die Box nicht größer zieht wenn das Span rausragt*/
  
overflowhidden;
}

UL.mymap LI A SPAN {
  
displaynone;
}

UL.mymap LI A:hover SPAN {
  
displayblock;
  
width100px;
  
height20px;
  
border1px solid black;
  
background-color#efe;
}

UL.mymap LI A#link1 {
  
top10px
  
left100px/* position des ersten links */
  
width20px;
  
height20px/* größe des klickbaren bereichs */

ungetestet - nur mal um die theorie aufzuzeigen...
(wahrscheinlich hab ich mich eh mit position: relative verhauen )

EDIT:
korrektur - natürlich muss das span beim hover ja sichtbar gemacht werden

Geändert von prego (05-06-2007 um 18:02 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 06-06-2007, 12:40
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard

danke... aber wie kann ich sowas...
<a href="#" class="mybox"><span>Text/Bild/was du wilst</span></a>


umschreiben, dass es checkt, dass ich es auf ner imagemap verwende...

also die image map hab span class=mybox
dieses span habe ich mit css unsichtbar gemacht, jetzt möchte ich aber,
wenn man über class drüberfährt, dass es mein span aufklappt...
wie teile ich dem dann mit, welches span er aufklappen soll?

bei a.mybox:hover span{... sollte er dann in der map das span aufklappen...

ich habe da ein script gefunden, free, ich poste mal den code:


Code:
<html>
<head>
<title>Titel deiner Seite</title>

<style type="text/css">
<!--

/* Tooltip */

a.tooltip,
a.tooltip:link,
a.tooltip:visited,
a.tooltip:active {
position: relative;
text-decoration: none;
font-style: bold;
border-bottom:0px dotted #4dbcf3;
}

a.tooltip:hover {
background: transparent;
z-index: 100;
}

a.tooltip span {
display: none;
text-decoration: none;
}

span.tooltip {
display: none;
text-decoration: none;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

a.tooltip:hover span {
display: block;
position: absolute;
top: 30px;
left: 0;
width: 200px;
z-index: 100;
color: #000000;
border: 1px solid;
border-color: #FFFFFF #D5D7DB #D5D7DB #FFFFFF;
border-left: 4px solid #4dbcf3;
padding: 2px 10px 2px 10px;
background: #EEEEEE;
font-family: Verdana, Arial, Helvetica, Sans-serif;
font-style: Normal;
text-align: left;
}

-->
</style>

</head>
<body>

<p><a class="tooltip" href="#">Hilfe<span><b>Hilfe</b> <br />
  Und hier steht die Erklärung zur Hilfe drin. </span></a>
  
  <br>
  <br>

<p>&nbsp;</p>
<p><img src="gfx/img.jpg" width="700" height="194" border="0" usemap="#Map">
<map name="Map"><area shape="rect" coords="118,30,399,147" href="#" class="tooltip"></map></p>

<span class="tooltip"><b>test2</b> <br />
hier ist dann der text </span>

</body>
</html>
der teil oben funktioniert, nur der teil mit der imagemap funkt nicht...
Mit Zitat antworten
  #6 (permalink)  
Alt 06-06-2007, 17:52
prego
 PHP Senior
Links : Onlinestatus : prego ist offline
Registriert seit: May 2005
Ort: Herborn
Beiträge: 1.609
prego ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Komisch, ist funktional so ziemlich das selbe was ich geschrieben habe.

Das Span klappt beim Hover auf das A aus (a:hover span) - du positionierst das a als block-level elements relative (left, top) - sollte ansich so funktionieren...

denk nochmal drüber nach - hab mom keine zeit ne beispielimplementation zu machen.
Mit Zitat antworten
  #7 (permalink)  
Alt 06-06-2007, 19:51
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von starsk8er
der teil oben funktioniert, nur der teil mit der imagemap funkt nicht...
Was bitte sollte denn da "funken" ...?
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #8 (permalink)  
Alt 06-06-2007, 23:54
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Zitat:
Original geschrieben von wahsaga
Was bitte sollte denn da "funken" ...?
also ich möchte dass das feld bei der imagemap aufklappt, also wenn ich über den markierten teil beim bild fahre, beim link selbst <a href... funktionierts...

bei der imagemap <area class=.... da funktionierts leider nicht, das ist mein problem, also ich schaffe es nicht, das css so anzupassen, dass wenn ich über den gesetzten link auf der imagemap fahre, dass es dann ein <span feld unter der maus sichtbar macht.
danke für die hilfe.
Mit Zitat antworten
  #9 (permalink)  
Alt 07-06-2007, 00:01
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von starsk8er
bei der imagemap <area class=.... da funktionierts leider nicht, das ist mein problem, also ich schaffe es nicht, das css so anzupassen
Das wirst du auch nicht schaffen, weil es mit aktuellem CSS unmöglich ist.


Beim Link funktioniert das, weil du da den Nachfahrenselektor nutzen kannst - Span ist Nachfahre von A, und kann deshalb über einen entsprechenden Selektor "abhängig" vom A, und damit auch von dessen Zustand A:hover angesteuert werden.

Area ist aber ein inhaltsloses Element, kann keine Nachfahren haben - also kannst du da auch nix mit dem Nachfahrenselektor selektieren ...


Also bleibt dafür doch nur Javascript.
Auf onmouseover/-out des Area-Elements reagieren, und dann entweder style-Eigenschaften oder Klasse eines anderen Elementes ändern.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #10 (permalink)  
Alt 07-06-2007, 00:04
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard

verstehe danke... dann plage ich mich da nicht weiter rum, kennst du zufällig so ein script? das mit java funktioniert und das ich da einbauen könnte? hab schon damals bei google gesucht und leider keins gefunden und selbst eins zu programmieren, da fehlt mir leider die fähigkeit. danke
Mit Zitat antworten
  #11 (permalink)  
Alt 07-06-2007, 00:23
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Original geschrieben von starsk8er
kennst du zufällig so ein script?
Die Bezeichnung "Script" wäre für so etwas primitives schon reichlich hoch gegriffen.

Wenn man es ganz simpel umsetzt, dann braucht es ja nicht viel mehr, als die beiden bereits genannten Eventhandler, getElementById oder vergleichbares zum Zugriff auf das zu ändernde Element, und ein oder mehrere Zuweisungen an die erwähnten Eigenschaften.
Zitat:
das mit java funktioniert
Nein, Java ist immer noch nicht das gleiche wie JavaScript, ganz im Gegenteil.
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #12 (permalink)  
Alt 07-06-2007, 10:18
Husti
 Junior Member
Links : Onlinestatus : Husti ist offline
Registriert seit: Jan 2003
Ort: Fischkoppland
Beiträge: 130
Husti ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Funktional, browserfreundlich und ausführlich hat sich Walter Zorn den Tooltips mit Zing und Zong gewidmet. Hut ab dafür und daher hier genannt.
http://www.walterzorn.de/tooltip/tooltip.htm
__________________
Und ist man alt wie ein Kuh, lernt man immer noch dazu.
THX, LOL, ROFL & Co. -> Netzjargon auf Wikipedia
Mit Zitat antworten
  #13 (permalink)  
Alt 07-06-2007, 13:00
starsk8er
 Registrierter Benutzer
Links : Onlinestatus : starsk8er ist offline
Registriert seit: Oct 2002
Beiträge: 149
starsk8er ist zur Zeit noch ein unbeschriebenes Blatt
Standard

vielen dank für die ganzen antworten, und die super page, ich hoffe ich finde dort das richtige script.
lg
tj
Mit Zitat antworten
Antwort

Lesezeichen


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

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 10:33 Uhr.