HTML: Links und änderung der Hintergrundfarbe beim mouseover in table rows

Nestrus · 01.04.2003, 08:57

Hallo

Ich bin gerade daran mit PHP und mySQL einen Teil eines Projektes bei uns in der Schule zu programmieren und dabei kommt eine große Tabelle vor.
Ich würde die gerne so gestalten wie die zB im neuen PHPMyAdmin, so dass sich sobald man den Mauszeiger drüberbewegt der Hintergrund der aktuellen Reihe hervorgehebt wird und ein link über die ganze Zeile ist, so dass man auch auf die Zwischenräume zwischen der Schrift klicken kann.
Die bei PHPMyAdmin haben das mir irgendeinem JavaScript gemacht und die einzige HP auf der ich das auch mal gesehen hab, find ich jetzt nicht mehr...

Danke schon mal, schönen Gruß
Nestrus

Nestrus · 01.04.2003, 09:36

Jetzt weiß ich auch, wiso es jetzt nicht mehr geht:
Vorher hab ich mit dem IE getestet, dort ging das mit einem link über die ganze Zeile, jetzt wo ich mit mozilla teste, gehts nicht mehr....

dub · 01.04.2003, 10:59

Code:

<html>
 <head>
  <script language="javascript">
   function l_over(id)
   {
    document.getElementById(id).style.backgroundColor = "ccccff";
   }
   function l_out(id)
   {
    document.getElementById(id).style.backgroundColor = "cccccc";
   }
  </script>
 </head>
 <body>
  <table>
   <tr id="1" style="background-color:#cccccc;" onmouseover="l_over(1)" onmouseout="l_out(1)">
    <td></td>
   </tr>
   <tr id="1" style="background-color:#cccccc;" onmouseover="l_over(2)" onmouseout="l_out(2)">
    <td></td>
   </tr>
   <tr id="1" style="background-color:#cccccc;" onmouseover="l_over(3)" onmouseout="l_out(3)">
    <td></td>
   </tr>
  </table>
 </body>
</html>

heli2sky · 01.04.2003, 21:15

lustig... ich hatte vor kurzem genau das gleiche problem...

ich hab das so gelöst:

Code:

<script language="javascript">
function link(url,frame) {
window.open(url,frame);
}
</script>

[...]

<td class="link" onmouseover="this.style.backgroundColor='#A4A8F2',this.style.color='white'"
onmouseout="this.style.backgroundColor='white',this.style.color='black'"
onclick="link('http://www.ams-wien.at','_blank')">Homepage Schule</td>

jetzt meine frage: da ich keinen echten link habe (a href...) hab ich angst, dass das nicht richtig mit allen browsern funktioniert... ist das script in ordnung oder sollte ich was ändern?

ich hab das übrigens auf http://www.ams-7c.de.vu eingesetzt! (geht leider bis morgen um 7 nicht wegen serverarbeiten...)

Nestrus · 01.04.2003, 22:39

Danke dub, aber jetzt muss ich meine Frage ja neu definieren:
Ich hatte einen Link über die ganze Reihe, so das man auf die Zwischenräume auswählen konnte, der ja -wie mittlerweile herausgefunden- halt nur mit dem IE geht, für mich also vollkommen unakzeptabel.
Da im IE aber der Mauszeiger nicht zu einer Hand wurde sondern zu einem "I" wurde, wollte ich noch optisch den link hervorheben und nebenbei in breiten Tabellen, bei denn einige Spalten leer sein können das lesen erleichtern und hab das so gelöst:
<tr onmouseover="this.bgColor='#Farbe1';" onmouseout="this.bgColor='#Farbe2';">
Jetzt fehlt mir eigentlich nur noch das mit dem link, muss ich dazu auch ein JavaScript machen, dass ich zusätzlich beim onmouseover starte?

Nestrus · 01.04.2003, 22:56

Zitat:

Original geschrieben von heli2sky
lustig... ich hatte vor kurzem genau das gleiche problem...

ich hab das so gelöst:

Code:

<script language="javascript"> function link(url,frame) { window.open(url,frame); } </script> [...] <td class="link" onmouseover="this.style.backgroundColor='#A4A8F2',this.style.color='white'" onmouseout="this.style.backgroundColor='white',this.style.color='black'" onclick="link('http://www.ams-wien.at','_blank')">Homepage Schule</td>

jetzt meine frage: da ich keinen echten link habe (a href...) hab ich angst, dass das nicht richtig mit allen browsern funktioniert... ist das script in ordnung oder sollte ich was ändern?

ich hab das übrigens auf http://www.ams-7c.de.vu eingesetzt! (geht leider bis morgen um 7 nicht wegen serverarbeiten...)

Ah, danke.. (Ich sollte das nächste mal wohl das Fenster reloaden, wenn ich schon so lange mit antworten warte...)
Wir haben eh fast das gleiche gedacht, ich habs jetzt so gemacht:

Code:

<tr onmouseover="this.bgColor='#Farbe'" onmouseout="this.bgColor='#Farbe';" onclick="window.open('url')">

Und es funktioniet mit mozilla wunderbar, also schätze ich auch das es mit allen anderen browsern geht...

PS: Ach ja, dein script finde ich übrigens ziemlich sinnlos (aber das bei dub auch)...

Sesa_Mina · 02.04.2003, 00:40

Der erstbeste Popup blocker wird bei window.open sofort in Aktion treten.

Besser du löst das mit document.href="" i´m onclick event.

Nestrus · 02.04.2003, 11:11

Ach ja, uf was reagieren diese Pop-Up Blocker? Auf die Phrase window.open?
Dann passt eh, weil durch das komische Fuesbox Zeugs und so, in dem wir das ganze Projekt entwickeln hat dafür eh eigene Funktionen (openwindow()), wegen dem Titel und so Zeugs, ich hab das nur für hier so geschreiben, dass es auch ohne unsere scriptdateien geht.

heli2sky · 02.04.2003, 17:25

hi! wie geht das genau mit dem document.href? ich hab das nicht hinbekommen, dass es geht!

Sesa_Mina · 02.04.2003, 17:50

onlclick="window.location.href='http://www.url.at'"

oder... "parent.frames[2].location.href=''"
wobei hier der 3. frame als "Ziel" angegeben ist. egal wie er heisst.

01.04.2003, 08:57	#1
Nestrus Elite Registriert seit: 01.07.2000 Alter: 40 Beiträge: 1.400	HTML: Links und änderung der Hintergrundfarbe beim mouseover in table rows Hallo Ich bin gerade daran mit PHP und mySQL einen Teil eines Projektes bei uns in der Schule zu programmieren und dabei kommt eine große Tabelle vor. Ich würde die gerne so gestalten wie die zB im neuen PHPMyAdmin, so dass sich sobald man den Mauszeiger drüberbewegt der Hintergrund der aktuellen Reihe hervorgehebt wird und ein link über die ganze Zeile ist, so dass man auch auf die Zwischenräume zwischen der Schrift klicken kann. Die bei PHPMyAdmin haben das mir irgendeinem JavaScript gemacht und die einzige HP auf der ich das auch mal gesehen hab, find ich jetzt nicht mehr... Danke schon mal, schönen Gruß Nestrus ____________________________________ "reden 2 unsinn im wcm forum, meint der dritte is eh offtopic" (Gifty am 14. Apr 2002 um 22:47 in " WCM Rat & Tat Forum > Meinung > Guru, e-Zitate & Off Topic > Kommt ein Mann zum Arzt...")

01.04.2003, 09:36	#2
Nestrus Elite Registriert seit: 01.07.2000 Alter: 40 Beiträge: 1.400	Jetzt weiß ich auch, wiso es jetzt nicht mehr geht: Vorher hab ich mit dem IE getestet, dort ging das mit einem link über die ganze Zeile, jetzt wo ich mit mozilla teste, gehts nicht mehr.... ____________________________________ "reden 2 unsinn im wcm forum, meint der dritte is eh offtopic" (Gifty am 14. Apr 2002 um 22:47 in " WCM Rat & Tat Forum > Meinung > Guru, e-Zitate & Off Topic > Kommt ein Mann zum Arzt...")

01.04.2003, 21:15	#4
heli2sky Master Registriert seit: 02.10.2001 Alter: 38 Beiträge: 523	lustig... ich hatte vor kurzem genau das gleiche problem... ich hab das so gelöst: Code: <script language="javascript"> function link(url,frame) { window.open(url,frame); } </script> [...] <td class="link" onmouseover="this.style.backgroundColor='#A4A8F2',this.style.color='white'" onmouseout="this.style.backgroundColor='white',this.style.color='black'" onclick="link('http://www.ams-wien.at','_blank')">Homepage Schule</td> jetzt meine frage: da ich keinen echten link habe (a href...) hab ich angst, dass das nicht richtig mit allen browsern funktioniert... ist das script in ordnung oder sollte ich was ändern? ich hab das übrigens auf http://www.ams-7c.de.vu eingesetzt! (geht leider bis morgen um 7 nicht wegen serverarbeiten...) ____________________________________ Lang ist der Weg durch Lehren, kurz und wirksam durch Beispiele. Lucius Annaeus Seneca ...:::www.modellbaulexikon.org:::... www.acrobat-se.org \| www.ams-8c.de.vu

01.04.2003, 22:39	#5
Nestrus Elite Registriert seit: 01.07.2000 Alter: 40 Beiträge: 1.400	Danke dub, aber jetzt muss ich meine Frage ja neu definieren: Ich hatte einen Link über die ganze Reihe, so das man auf die Zwischenräume auswählen konnte, der ja -wie mittlerweile herausgefunden- halt nur mit dem IE geht, für mich also vollkommen unakzeptabel. Da im IE aber der Mauszeiger nicht zu einer Hand wurde sondern zu einem "I" wurde, wollte ich noch optisch den link hervorheben und nebenbei in breiten Tabellen, bei denn einige Spalten leer sein können das lesen erleichtern und hab das so gelöst: <tr onmouseover="this.bgColor='#Farbe1';" onmouseout="this.bgColor='#Farbe2';"> Jetzt fehlt mir eigentlich nur noch das mit dem link, muss ich dazu auch ein JavaScript machen, dass ich zusätzlich beim onmouseover starte? ____________________________________ "reden 2 unsinn im wcm forum, meint der dritte is eh offtopic" (Gifty am 14. Apr 2002 um 22:47 in " WCM Rat & Tat Forum > Meinung > Guru, e-Zitate & Off Topic > Kommt ein Mann zum Arzt...")

02.04.2003, 00:40	#7
Sesa_Mina Schwarzfußfrettchen Registriert seit: 28.01.2001 Beiträge: 2.071	Der erstbeste Popup blocker wird bei window.open sofort in Aktion treten. Besser du löst das mit document.href="" i´m onclick event. ____________________________________ Wann die kan Almdudler ham... \"Es gibt nur einen Weg zur Lunge, und der muss geteert werden, damit der Krebs nicht stolpert!\" http://www.dream.at/gizmo/bunny.gif Image is © 2001 Merle Sterndalsäg.. ähh... jäger

02.04.2003, 11:11	#8
Nestrus Elite Registriert seit: 01.07.2000 Alter: 40 Beiträge: 1.400	Ach ja, uf was reagieren diese Pop-Up Blocker? Auf die Phrase window.open? Dann passt eh, weil durch das komische Fuesbox Zeugs und so, in dem wir das ganze Projekt entwickeln hat dafür eh eigene Funktionen (openwindow()), wegen dem Titel und so Zeugs, ich hab das nur für hier so geschreiben, dass es auch ohne unsere scriptdateien geht. ____________________________________ "reden 2 unsinn im wcm forum, meint der dritte is eh offtopic" (Gifty am 14. Apr 2002 um 22:47 in " WCM Rat & Tat Forum > Meinung > Guru, e-Zitate & Off Topic > Kommt ein Mann zum Arzt...")

02.04.2003, 17:25	#9
heli2sky Master Registriert seit: 02.10.2001 Alter: 38 Beiträge: 523	hi! wie geht das genau mit dem document.href? ich hab das nicht hinbekommen, dass es geht! ____________________________________ Lang ist der Weg durch Lehren, kurz und wirksam durch Beispiele. Lucius Annaeus Seneca ...:::www.modellbaulexikon.org:::... www.acrobat-se.org \| www.ams-8c.de.vu

02.04.2003, 17:50	#10
Sesa_Mina Schwarzfußfrettchen Registriert seit: 28.01.2001 Beiträge: 2.071	onlclick="window.location.href='http://www.url.at'" oder... "parent.frames[2].location.href=''" wobei hier der 3. frame als "Ziel" angegeben ist. egal wie er heisst. ____________________________________ Wann die kan Almdudler ham... \"Es gibt nur einen Weg zur Lunge, und der muss geteert werden, damit der Krebs nicht stolpert!\" http://www.dream.at/gizmo/bunny.gif Image is © 2001 Merle Sterndalsäg.. ähh... jäger

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