Automatisches Hover von Bilddateien?

Hi!

Das wird mit JavaScript nicht so einfach gehen... Ich denke aber, dass es möglich sein sollte, mit einem (nicht Java-)Script die entsprechenden Befehle automatisch hinzuzufügen. Das würde eine ganze Menge Tipparbeit sparen.

Mamphil

Ich glaube, du verlangst einfach zu viel von JavaScript. Das Problem an dieser Sprache ist einfach, dass du zwar viel machen kannst, doch wird es sicherlich nicht überall funktionieren  <img border="0" title="" alt="[Enttäscht]" src="images/icons/frown.gif" />  Daher würde ich solche Spielereien (die IMHO auch nichts bringen) einfach lassen und lieber ein wenig mehr tippen bzw. per Copy & Paste reinkopieren. Was soll eine solche Funktion überhaupt?

Mamphil

Hi!

Ich habe es so verstanden, dass auf ein onMouseOver etc. ganz verzichtet werden soll und dies automatisch mit allen Dateien gemacht werden soll, die die Endung _hover haben. Und das ist nicht so einfach möglich, oder irre ich?

Mamphil

Hi!

Deine Aufgabe ist nicht wirklich einfach... Ich würde ein kleines Programm schreiben (z. B. in PHP) mit dem ein bestimmter Syntax entsprechend ersetzt wird. (z. B. ein <img src="bild_hover.jpg"> durch die entsprechenden JavaScript und onMouseOver-Befehle). Das wäre aber eher ein Projekt und gehört dann ins entsprechende Forum  <img border="0" title="" alt="[Breites Grinsen]" src="images/icons/grin.gif" />

Mamphil

Ich habe unter  http://www.dynamicdrive.com/dynamicinde … /index.htm ein schönes Menü gefunden. Wenn ihr diese Menü downloadet und in einen Ordner entpackt, werden auch ein paar Bilddateien entpackt. Wenn man dann der BildDatei(en) einfach anstatt der Endung .gif die Endung _over.gif gibt, wird die Bilddatei automatisch gehovert, ohne dass ich irgendetwas schreiben muss. Ich weiß nur nicht, wie das zustande kommt!   <img border="0" title="" alt="[Durcheinander]" src="images/icons/confused.gif" />

Da steht auch irgendwas von effecten! Welche gibt es da?

Projekt eingestellt?

Außerdem würde es mit PHP und nem CMS viel einfach zu "realisieren" sein.........

Hey T-Bird,
das Ding lässt sich mit PHP tatsächlich recht unkompliziert realisieren (soweit ich das überblicke), solange die Funktion tatsächlich nur statische Webseiten bearbeiten soll.
Eine erste Seite nimmt die Daten auf, wie Pfad zum Verzeichnis, in dem die zu bearbeitenden Dateien liegen (oder sollen nur einzelne Dateien bearbeitet werden), Sollen auch Unterverzeichnisse bearbeitet werden? Dateien mit welchen Endungen sollen bearbeitet werden? Soll vor bearbeiten einer Datei eine Sicherheitsabfrage stattfinden, Backup? und dieser ganze kram halt, um das Ding komfortabel zu machen.
In welchen Verzeichnissen liegen die entsprechenden Bilder?

Nun liest du alle Bilder ein, die mit _hover enden und speicherst die Namen irgendwo, irgendwie. Dann suchst du jede Datei durch, ob irgendwo ein src="$name" in einem <img>-Tag vorkommt und baust dann in alle Dateien die entsprechenden JS-Codes ein. Das wars. Wenn du Laufzeit-Begrenzungs-Probleme hast, dann machs, wie in der Suchfunktion hier im Board. Bei jedem Skriptaufruf wird nur eine Datei (oder halt soviele, wie sicher gehen) bearbeitet und eine Reload-Seite an den Browser geschickt. Die daten mußt du dann halt in einer (Session-)Datei oder DB speichern.

...ich bin übrigends nicht dabei bei so einem Projekt, aber falls du Probleme bekommst ... weißt scho, www.lass-uns-drüber-reden.de   <img border="0" title="" alt="[Breites Grinsen]" src="images/icons/grin.gif" />   

Basti
 
  <small>[ 19-08-2002, 16:29: Beitrag editiert von: Basti ]</small>

da ich mich gerade für automatisietes event-hinzufügen interresiert habe, folgender vorschlag für IE (pseudocode!!):
  </font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">for(i=0; document.images[i]; i++) {
   if( rechterTeil(document.images[i]) == "_hover.gif") {
     myscript = "<<script for=""+ IMAGE_ID +"" event='onMouseOver()' language='JScript' type='text/jscript'> {"+
     
        SRC DES IMAGES ÄNDERN (zugiff per ID)

       "}</script>";
     document.all.tags("head")[0].insertAdjacentHTML("BeforeEnd", myscript);

   }
}
  [/code]</blockquote><font size="2" face="Verdana, Helvetica, sans-serif">sowas in der richtung. Für NN sieht das ganze dann anders aus (siehe selfhtml unter event).
Das ganze dann noch für onmouseout. Eine funktion, die die ganze prozedur startet, und fertig ist die zauberei.

Ein Javabeispiel!

Hallo,
warum nicht gleich CSS einsetzen ?
IMG:hover{border:ridge 3px red;) bzw. A:hover
Das erspart dann viele Hover-Bilder. Mit Microsoft-Filtern oder Netscape6-Transparent-Funktionen liessen sich auch nette Effekte erzielen. Vorteil: schnellere Ladezeiten.
Da IMG-Hover-Funktionen aber immer von den Cache-Einstellungen abhängig sind, jaja manche deaktivieren Ihren Cache, empfiehlt sich eine Layer-Lösung mit Z-Index, was dann auch mit Netscape4 leicht zu realisieren ist.
Auch die Kombination zwischen CSS und Ebenenverschiebung ist zu empfehlen. Bei Browsern die CSS beherrschen werden dann eben die LAYER nicht geladen. Wer unbedingt alle HTML-Codes für alle Browser in einer Datei unterbringen will, ist allerdings schlecht beraten. Experimentell habe ich mal diesen Versuch gemacht *g*:
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">function isGeckoInit(){
Eingabefelder=document.getElementsByTagName("input");
Textfeld=document.getElementsByTagName("textarea");
Etiketten=document.getElementsByTagName("label");
myLinkz=document.getElementsByTagName("span");
for (i=0;i<=(Eingabefelder.length-1);i++){
Eingabefelder[i].removeAttribute("onmouseover");
Eingabefelder[i].removeAttribute("onmouseout");
Eingabefelder[i].removeAttribute("onfocus");
Eingabefelder[i].removeAttribute("onblur");

}
for (i=0;i<=(Etiketten.length-1);i++){
Etiketten[i].removeAttribute("onmouseover");
Etiketten[i].removeAttribute("onmouseout");
Etiketten[i].removeAttribute("onfocus");
Etiketten[i].removeAttribute("onblur");
}
for(i=0;i<=7;i++){
myLinkz[i].removeAttribute("onmouseover");
myLinkz[i].removeAttribute("onmouseout");
myLinkz[i].removeAttribute("onfocus");
myLinkz[i].removeAttribute("onblur");
}
Textfeld[0].removeAttribute("onmouseover");
Textfeld[0].removeAttribute("onmouseout");
Textfeld[0].removeAttribute("onfocus");
Textfeld[0].removeAttribute("onblur");

for(i=0;i<=(Etiketten.length-1);i++){
EZiel=Etiketten[i].getAttribute("for");
Mtrouble=document.getElementById(EZiel).getAttribute("type");Mtrouble.toLowerCase();
if(Mtrouble!="checkbox"