kleiner noob braucht kleinen javascript-codeschnippsel!

mollitz · 18.11.2006, 16:45

hi,
ich baue grad mit php, css html und leider jetzt auch javascript.
das ganze ist in einer tabelle und in jedem kasten ist ein bild als grafischer button mit dem <a>-tag. wenn ich jetzt über einen dieser bilder/buttons drüberfahre, soll sich der bilderpfad ändern!und zwar so:
normal:

Code:

<a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=\"
       style=\"display:block; background-image:url(./thumb/$pfad/$file);height:143px;
       width:190px;\"></a>

mit maus drüber :

Code:

<a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=\"
       style=\"display:block; background-image:url(./negativ/$pfad/$file);height:143px;
       width:190px;\"></a>

die veränderung ist im style-attribut background-image und zwar von ./thumb/$pfad/$file
zu
./negativ/$pfad/$file
im ordner thumb sind die ganzen bilder in kleiner größe und im ordner negativ sind die bilder klein und umgekehrt!
jetzt brauch ich bloss irgendne kleine jscript funktion oder sonst was, mit der ich anstatt negativ und thumb ne variable reinstellen kann, die sich verändert wenn ich über des bild fahr (onmouseover; onmouseout)
wer hat ne idee?

nikosch · 18.11.2006, 19:59

versuchs doch mal selber:
die links mit id parameter markieren
funktion erstellen, die als parameter diese id und pfad zum alternativ-bild erhält
i.d. funktion per getElementById auf style des Links zugreifen und bild ändern
diese funktion im link mit onMouseOver aufrufen

ist nicht so schwer.

übrigens: das a Tag ist kein Block-Element, deshalb ist die style-angabe height,width ungültig und wird wahrsch. auch nicht von allen browsern unterstützt. nutze lieber ein umschließendes blockelement (div oder li)...

agrajag · 18.11.2006, 20:25

Zitat:

Zitat von nikosch77

übrigens: das a Tag ist kein Block-Element, deshalb ist die style-angabe height,width ungültig und wird wahrsch. auch nicht von allen browsern unterstützt. nutze lieber ein umschließendes blockelement (div oder li)...

Deswegen schreibt er ja: "display:block;".

Finde ich so allemal besser als noch ein unnötiges Element drumrum zu machen.

Flor1an · 18.11.2006, 22:42

Also das ist ja sowas wie ein Mouseovereffekt? Da gibts ne Lösung rein mit CSS.

Du nimmst das Bild welches angezeigt wird und welches beim Mouseover angezeigt werden soll und setzt sie genau untereinander und speicherst es als EIN Bild ab ... jetzt haste halt nen doppelt so hohes Bild mit beiden Versionen. Beim normalen Link zeigst du das Bild normal an! beim xxx:hover Effekt in CSS wechselst du dann die Position vom Bild.

Code:

.my_link
{
    background: url('pfad/zum/bild.jpg') 0 0 no-repeat;
    display: block;
    width: 20px;
    height: 10px;
}

.my_link:hover, .my_link:active, .my_link:focus
{
    background-position: 0 -10px;
}

In dem Beispiel wäre jetzt das Bild zum anzeigen 20x10px groß, das Hover Bild ebenfalls und das was DU speichern sollst also beide übereinander ist 20x20 groß.

Das Bild wird also beim Mouseover einfach nur nach oben verschoben ...

Vorteile:
1. nur CSS, du brauchst also kein JavaScript, funktioniert auch bei dennen die JS deaktiviert haben.
2. du brauchst nur ein Bild
3. das Mouseoverbild ist bereits geladen wenn du mit der Mouse drüber gehst! Also keine Nachladeeffekt bei dem es zeitweise kein Bild gibt, auch kein flackern.
4. brauchst wenig Code im Gegensatz zur JS Version

mollitz · 19.11.2006, 10:09

des is ne gute idee!!
ich glaub des versuch ich mal!
@nikosch:
wie du gelesen hast: ich hab keine ahnung und auch keine lust was zu versuchen, das heisst ich will kein javascript lernen sondern ganz dreist einen vollständigen codeschnippsel haben

agrajag · 19.11.2006, 11:51

Zitat:

Zitat von mollitz

@nikosch:
wie du gelesen hast: ich hab keine ahnung und auch keine lust was zu versuchen, das heisst ich will kein javascript lernen sondern ganz dreist einen vollständigen codeschnippsel haben

Super!

Unsere Kontonummern schicken wir dir dann in den nächsten Tagen zu.

nikosch · 19.11.2006, 17:58

Zitat:

Zitat von Agrajag

Deswegen schreibt er ja: "display:block;".

Ups, hatte ich überlesen.

mollitz · 23.11.2006, 14:11

ES TUUUUT!
also des bild erstellen!
jetzt muss ich noch des mit css machen
des 10nte mal editiert:
des mit dem css kapier ich keinen meter!

Code:

echo "<td align=center id=\"my_link\" style=\" width:193px\">
       <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=$filen\"
       style=\"display:block; background-image:url(./negativ/$pfad/$file) 0 0 no-repeat;height:143px;
       width:190px;\"></a></td>";

so siehts aus grad, aber es zeigt nichts an =)
jemand nen tip?

M3g4Star · 23.11.2006, 17:06

ja lol du musst auch irgendwas zwischen den beiden a-Tags schreiben was als klickbarer Link dienen soll ..

PHP-Code:

  <?php

echo "<td align=center id=\"my_link\" style=\" width:193px\">

       <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=$filen\"

       style=\"display:block; background-image:url(./negativ/$pfad/$file) 0 0 no-repeat;height:143px;

       width:190px;\">klick mich</a></td>";

?>

mollitz · 24.11.2006, 13:09

hääää?
da soll aber nicht klick mich stehen, sondern des bild, oder wird des klick mich versteckt?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Einführung - Javascript im Schichtenmodell	nikosch	Tutorials	4	11.04.2009 17:06

18.11.2006, 16:45
mollitz Benutzer Registriert seit: 22.10.2005 Beiträge: 98	kleiner noob braucht kleinen javascript-codeschnippsel! hi, ich baue grad mit php, css html und leider jetzt auch javascript. das ganze ist in einer tabelle und in jedem kasten ist ein bild als grafischer button mit dem <a>-tag. wenn ich jetzt über einen dieser bilder/buttons drüberfahre, soll sich der bilderpfad ändern!und zwar so: normal: Code: <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=\" style=\"display:block; background-image:url(./thumb/$pfad/$file);height:143px; width:190px;\"></a> mit maus drüber : Code: <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=\" style=\"display:block; background-image:url(./negativ/$pfad/$file);height:143px; width:190px;\"></a> die veränderung ist im style-attribut background-image und zwar von ./thumb/$pfad/$file zu ./negativ/$pfad/$file im ordner thumb sind die ganzen bilder in kleiner größe und im ordner negativ sind die bilder klein und umgekehrt! jetzt brauch ich bloss irgendne kleine jscript funktion oder sonst was, mit der ich anstatt negativ und thumb ne variable reinstellen kann, die sich verändert wenn ich über des bild fahr (onmouseover; onmouseout) wer hat ne idee?


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

18.11.2006, 19:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	versuchs doch mal selber: die links mit id parameter markieren funktion erstellen, die als parameter diese id und pfad zum alternativ-bild erhält i.d. funktion per getElementById auf style des Links zugreifen und bild ändern diese funktion im link mit onMouseOver aufrufen ist nicht so schwer. übrigens: das a Tag ist kein Block-Element, deshalb ist die style-angabe height,width ungültig und wird wahrsch. auch nicht von allen browsern unterstützt. nutze lieber ein umschließendes blockelement (div oder li)...

18.11.2006, 22:42
Flor1an da schreibt der ElePHPant Registriert seit: 18.06.2008 Beiträge: 8.903 PHP-Kenntnisse: Fortgeschritten	Also das ist ja sowas wie ein Mouseovereffekt? Da gibts ne Lösung rein mit CSS. Du nimmst das Bild welches angezeigt wird und welches beim Mouseover angezeigt werden soll und setzt sie genau untereinander und speicherst es als EIN Bild ab ... jetzt haste halt nen doppelt so hohes Bild mit beiden Versionen. Beim normalen Link zeigst du das Bild normal an! beim xxx:hover Effekt in CSS wechselst du dann die Position vom Bild. Code: .my_link { background: url('pfad/zum/bild.jpg') 0 0 no-repeat; display: block; width: 20px; height: 10px; } .my_link:hover, .my_link:active, .my_link:focus { background-position: 0 -10px; } In dem Beispiel wäre jetzt das Bild zum anzeigen 20x10px groß, das Hover Bild ebenfalls und das was DU speichern sollst also beide übereinander ist 20x20 groß. Das Bild wird also beim Mouseover einfach nur nach oben verschoben ... Vorteile: 1. nur CSS, du brauchst also kein JavaScript, funktioniert auch bei dennen die JS deaktiviert haben. 2. du brauchst nur ein Bild 3. das Mouseoverbild ist bereits geladen wenn du mit der Mouse drüber gehst! Also keine Nachladeeffekt bei dem es zeitweise kein Bild gibt, auch kein flackern. 4. brauchst wenig Code im Gegensatz zur JS Version

19.11.2006, 10:09
mollitz Benutzer Registriert seit: 22.10.2005 Beiträge: 98	des is ne gute idee!! ich glaub des versuch ich mal! @nikosch: wie du gelesen hast: ich hab keine ahnung und auch keine lust was zu versuchen, das heisst ich will kein javascript lernen sondern ganz dreist einen vollständigen codeschnippsel haben

23.11.2006, 14:11
mollitz Benutzer Registriert seit: 22.10.2005 Beiträge: 98	ES TUUUUT! also des bild erstellen! jetzt muss ich noch des mit css machen des 10nte mal editiert: des mit dem css kapier ich keinen meter! Code: echo "<td align=center id=\"my_link\" style=\" width:193px\"> <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=$filen\" style=\"display:block; background-image:url(./negativ/$pfad/$file) 0 0 no-repeat;height:143px; width:190px;\"></a></td>"; so siehts aus grad, aber es zeigt nichts an =) jemand nen tip?

23.11.2006, 17:06
M3g4Star Erfahrener Benutzer Registriert seit: 23.08.2007 Beiträge: 1.510	ja lol du musst auch irgendwas zwischen den beiden a-Tags schreiben was als klickbarer Link dienen soll .. PHP-Code: `<?php echo "<td align=center id=\"my_link\" style=\" width:193px\"> <a href=\"./prog/showpic.php?pfad=$pfad&file=$file&vorher=$filev&nachher=$filen\" style=\"display:block; background-image:url(./negativ/$pfad/$file) 0 0 no-repeat;height:143px; width:190px;\">klick mich</a></td>"; ?>`

24.11.2006, 13:09
mollitz Benutzer Registriert seit: 22.10.2005 Beiträge: 98	hääää? da soll aber nicht klick mich stehen, sondern des bild, oder wird des klick mich versteckt?