Antworten: 11
Seite [1] |
|
 tebuRock the board  Beiträge: 94 |
# Thema - 04.03.2008 um 19:48 Uhr
Hallo zusammen, ich bin auf folgende Seite gestoßen http://www.360esports.com und da ist mir dieser Mouseover Effekt bei den Warsnav artikelnav und so weiter aufgefallen, jetzt wollte cih mal fragen wie sich sowas umsetzen lässt bzw. ob das mit csp geht und was kann man dann da auslesen lassen? tebu ------------------ tebu |
Inaktiv |
 |
| SoKol King for a day  Herkunft: Heilbronn Beiträge: 281 |
# Antwort: 1 - 05.03.2008 um 09:36 Uhr
da: http://code-inside.de/blog/2007/11/27/howto-javascript-mouse-over-mousepositione n-fr-details/ aber ka wie man das einbdnet, ich brauchs für login, jemand ne idee =) ------------------ www.groundpictures.de Zuletzt editiert von SoKol am 05.03.2008 um 11:40 Uhr (1x Editiert) |
Inaktiv |
 |  |
| tebu Thread-Ersteller Rock the board Beiträge: 94 |
# Antwort: 2 - 05.03.2008 um 19:28 Uhr
mh ja das ist auch mein Problem also so einen Code kann man ja googln aber wie baue ich das jetzt so ein das ich am besten noch aus der db daten da reinschreiben kann! ------------------ tebu |
Inaktiv |
| |
| reVerB Geekboy Beiträge: 1237 |
# Antwort: 3 - 06.03.2008 um 09:34 Uhr
Ich sehe da irgendwie kein Problem. <div id="MouseOver" style="display: none;"> <<-- Das kommt irgendwo in die HTML</div> <p onmousemove="showMouseOver("Hier kommt der text bzw. Die Variablen rein, die man benutzen oder anzeigen will", event)" onmouseout="hideMouseOver()">Hier kann zb. Ein Link, Bild oder Hover-Bild rein</p> Der JS-Code bleibt ja an sich der gleiche: function showMouseOver(text, event) { document.getElementById("MouseOve").innerHTML = text; var topPixel = event.clientY + 10; var leftPixel = event.clientX + 10; document.getElementById("MouseOver").style.top = topPixel + "px"; document.getElementById("MouseOver").style.left = leftPixel + "px"; document.getElementById("MouseOver").style.display = "block"; } function hideMouseOver() { document.getElementById("MouseOver").innerHTML = ""; document.getElementById("MouseOver").style.top = "0px"; document.getElementById("MouseOver").style.left = "0px"; document.getElementById("MouseOver").style.display = "none"; } Das sollte kein Ding sein. Im Grunde muss der HTML-Code aus dem ersten Quote oben an der Stelle, wo das Element sein soll, wo man mit der Maus drüber fährt. Den JS-Code packt man in eine extra Datei und lässt ihn laden. Ist Komplett Simpel. Ein Beispiel? <div id="MouseOver" style="display: none;"></div> <p onmousemove="showMouseOver("Last Wars<br>{wars:navlist}<br><br>Next Wars<br>{wars:navnext}", event)" onmouseout="hideMouseOver()"><a class="link" href="Clansphere Wars-page">Clanwars<a></p> Wenn der JS-Code eingebunden ist und die ID Mouseover im CSS Designed ist, sollte in dem Mouseover dann die letzten und die nächsten Clanwars angezeigt werden, wenn man mit der Maus über den Link "Clanwars" fährt. Berichtigt mich, wenn ich damit falsch liege. Den Blauen text also müsst ihr an der Stelle im HTML einfügen, wo ihr das haben wollt. Zuletzt editiert von reVerB am 13.03.2008 um 08:46 Uhr (1x Editiert) |
Inaktiv |
| |
| tebu Thread-Ersteller Rock the board Beiträge: 94 |
# Antwort: 4 - 06.03.2008 um 17:36 Uhr
gut klingt simpel! wie bau ich das dann ncoh ein das ich in der clansphere.css bestimmen kann wie der kasten aussehen soll! ------------------ tebu |
Inaktiv |
| |
| reVerB Geekboy Beiträge: 1237 |
# Antwort: 5 - 07.03.2008 um 19:57 Uhr
Einfach den CSS-Teil für den Mouseover in die Clabsphere.css Datei kopieren. Irgendwie ans ende oder so. edit by X-R4Y: .css nich cdd^^ hattest da nen kleinen tippfehler. Zuletzt editiert von X-R4Y  am 07.03.2008 um 20:21 Uhr (1x Editiert) |
Inaktiv |
| |
| SoKol King for a day Herkunft: Heilbronn Beiträge: 281 |
# Antwort: 6 - 08.03.2008 um 12:00 Uhr
Also wie nun xD Den javascript code mussm an doch als js datei machen und nicht in css oder?! 
------------------ www.groundpictures.de |
Inaktiv |
| |
| reVerB Geekboy Beiträge: 1237 |
# Antwort: 7 - 08.03.2008 um 17:14 Uhr
Danke an X-R4Y für die Korrektur ^^ Und nun OT: <div id="MouseOver" style="display: none;"></div> <p onmousemove="showMouseOver("Hier kommt der text bzw. Die Variablen rein, die man benutzen oder anzeigen will", event)" onmouseout="hideMouseOver()">Hier kann zb. Ein Link, Bild oder Hover-Bild rein</p> function showMouseOver(text, event) { document.getElementById("MouseOver").innerHTML = text; var topPixel = event.clientY + 10; var leftPixel = event.clientX + 10; document.getElementById("MouseOver").style.top = topPixel + "px"; document.getElementById("MouseOver").style.left = leftPixel + "px"; document.getElementById("MouseOver").style.display = "block"; } function hideMouseOver() { document.getElementById("MouseOver").innerHTML = ""; document.getElementById("MouseOver").style.top = "0px"; document.getElementById("MouseOver").style.left = "0px"; document.getElementById("MouseOver").style.display = "none"; } .MouseOver { position: absolute; ... ... } Sooo: Das rote kommt irgendwo in die HTML/HTM-Datei. Ist egal wo, da die Position des Elements von CSS (position: absolute; ) und JS (Der Event-Abfrage für die Maus) bestimmt wird. Hauptsache es steht im Body Tag. Das Grüne kommt da in die HTML/HTM-Datei, wo ihr das MouseOver Ding hinhaben wollt. Das spielt allerdings die Position in HTML eine Rolle. Das Blaue kommt entweder in eine extra .js Datei und wird dann von der HTML-Datei eingelesen oder ihr schreibt es in den Head-Bereich eurer HTML/HTM-Datei. Die externe Datei ist allerdings zu empfehlen. Das Braune kommt in die Clansphere.CSS Datei ans Ende am besten. Mit dem Teil formatiert ihr das aussehen des QuickInfo (Fenster was bei Mouseover aufgeht). Wichtig ist aber dabei, das position: absolute; mit drinne steht. Noch einfacher kann ich das net erklären. Wenn ihr das dann nicht hinbekommt, solltet ihr euch mehr mit der Materie beschäftigen oder das jemanden machen lassen. Es ist ja nicht böse gemeint. Aber man muss gerade für solche sachen ein wenig Grundkenntnisse mitbringen. Wenn die nicht da sind, habt ihr das mit solchen Sachen sehr schwer. MFG reVerB Zuletzt editiert von reVerB am 13.03.2008 um 08:44 Uhr (4x Editiert) |
Inaktiv |
| |
| tebu Thread-Ersteller Rock the board Beiträge: 94 |
# Antwort: 8 - 12.03.2008 um 21:26 Uhr
habe dazu noch ein paar Fragen und zwar will ich das jetzt einfach mal testweise ausprobieren und nehme dazu die users online navlist muss ich das dann in der themes.tpl machen? oder trotzdem in der index.htm? und wenn ich die .js datei extra abspeicher wo und wie muss ich die wieder aufrufen? ------------------ tebu |
Inaktiv |
| |
| reVerB Geekboy Beiträge: 1237 |
# Antwort: 9 - 13.03.2008 um 06:03 Uhr
Da fragst du jetzt mal was ^^ Ich glaube sogar, das du das in den PHP-Dateien machen musst. |
Inaktiv |
| |
| tebu Thread-Ersteller Rock the board Beiträge: 94 |
# Antwort: 10 - 13.03.2008 um 08:22 Uhr
mh könntes du mal versuchen nen konkretes beispiel zu machen ich habe da gestern rumprobiert an der users/navonline.php und bin nicht weitergekommen! ------------------ tebu |
Inaktiv |
| |
| reVerB Geekboy Beiträge: 1237 |
# Antwort: 11 - 13.03.2008 um 08:39 Uhr
In der Zeile 3 der navonline.tpl in den Themes steht folgendes: <td>{users:countryicon} {users:nick}</td> Mache daraus mal: <td onmousemove="showMouseOver("Hier kommt der text bzw. Die Variablen rein, die man benutzen oder anzeigen will", event)"; onmouseout="hideMouseOver()">{users:countryicon} {users:nick}</td> Dann solltest du Theoretisch in deine Index.htm den anderen JS-Code haben bzw. über die Index.htm die externe .js-Datei abrufen. Dann sollte das gehen. Allerdings habe ich bei dem JS-Code nen Bug entdeckt, der das scrollen betrifft. Je weiter man nach unten Scrollt, um so weiter verschiebt sich das Fenster von der Maus. Ich bin gerade schon am tüfteln. *EDIT* Du solltest dafür nicht die Codes verwenden, die du auf dieser einen Seite hast. Die funktionieren nicht, da der ersteller falsche anführungszeichen verwendet hat. Ich habe in diesem Thread alle Code-Pastes überarbeitet. Die sollten dann auch funktionieren. Zuletzt editiert von reVerB am 13.03.2008 um 08:48 Uhr (2x Editiert) |
Inaktiv |
| |
Antworten: 11
Seite [1] |
|
| Sie müssen sich registrieren, um zu antworten. |