Tabelle mit Links und OnMouseOver
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
aussehen
container
datei
display
dummerweise
element
erste
ger
geschichte
inhalt
klau
letztes mal
mache
navigation
script
tabelle
test
tip
transitional
ungefhr
-
Ich habe mir vorgenommen, auf meine Homepage eine Tabelle an die Seite als Linkmenue (Navigation) zu stellen. Ich hab auch schon ungefaehr so eine Idee, wie das ganze aussehen soll:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
</head>
<body>
<table>
<tr>
<a href="test.html">
<td bgcolor="#FFFFFF" onMouseOver="this.bgColor='#FF0000';this.style.cursor='hand'" onMouseOut="this.bgColor='#FFFFFF'">
Test
</td>
</a>
</tr>
<a href="test.html">
<td bgcolor="#FFFFFF" onMouseover="this.bgColor='#FF00000';this.style.cursor='hand'" onMouseOut="this.bgColor='#FFFFFF'">
Test1
</td>
</a>
</table>
</body>
</html>
Dummerweise klappt das irgendwie nicht (weder im Firefox noch im Konqueror)! Was mache ich falsch? -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hi super gemacht hier hast auch super tabele.
<body onload="init()" onclick="changeTabs()">
<style>
.conts {visibility:hidden}
.tab {border-top:solid thin #E0E0E0; border-right:solid thin gray;border-left:solid thin #E0E0E0;font-family:Verdana;font-size:10pt;text-align:center;font-weight:normal;cursor:hand;}
.selTab {border-left:solid thin white;border-top:solid thin white;border-right:solid thin black;font-weight:bold;font-color:dodgerblue;text-align:center}
</style>
<script LANGUAGE="JavaScript">
<!--
function public_Labels(label1, label2, label3, label4, label5, label6, label7){
t1.innerText = label1;
t2.innerText = label2;
t3.innerText = label3;
t4.innerText = label4;
t5.innerText = label5;
t6.innerText = label6;
t7.innerText = label7;
}
function public_Contents(contents1, contents2, contents3, contents4, contents5, contents6, contents7){
t1Contents.innerHTML = contents1;
t2Contents.innerHTML = contents2;
t3Contents.innerHTML = contents3;
t4Contents.innerHTML = contents4;
t5Contents.innerHTML = contents5;
t6Contents.innerHTML = contents6;
t7Contents.innerHTML = contents7;
init();
}
function init(){
tabContents.innerHTML = t1Contents.innerHTML;
}
var currentTab;
var tabBase;
var firstFlag = true;
function changeTabs(){
if(firstFlag == true){
currentTab = t1;
tabBase = t1base;
firstFlag = false;
}
if(window.event.srcElement.className == "tab"){
currentTab.className = "tab";
tabBase.style.backgroundColor = "white";
currentTab = window.event.srcElement;
tabBaseID = currentTab.id + "base";
tabContentID = currentTab.id + "Contents";
tabBase = document.all(tabBaseID);
tabContent = document.all(tabContentID);
currentTab.className = "selTab";
tabBase.style.backgroundColor = "";
tabContents.innerHTML = tabContent.innerHTML;
}
}
// -->
</script>
<table STYLE="width:400; height:200" CELLPADDING="0" CELLSPACING="0" bgcolor="black">
<tr>
<td ID="t1" CLASS="selTab" HEIGHT="25" bgcolor="white">Tip 1</td>
<td ID="t2" CLASS="tab" bgcolor="white">Tip 2</td>
<td ID="t3" CLASS="tab" bgcolor="white">Tip 3</td>
<td ID="t4" CLASS="tab" bgcolor="white">Tip 4</td>
<td ID="t5" CLASS="tab" bgcolor="white">Tip 5</td>
<td ID="t6" CLASS="tab" bgcolor="white">Tip 6</td>
<td ID="t7" CLASS="tab" bgcolor="white">Tip 7</td>
</tr>
<tr>
<td ID="t1base" STYLE="height:2; border-left:solid thin white" bgcolor="black"></td>
<td ID="t2base" STYLE="height:2; background-color:white"></td>
<td ID="t3base" STYLE="height:2; background-color:white"></td>
<td ID="t4base" STYLE="height:2; background-color:white"></td>
<td ID="t5base" STYLE="height:2; background-color:white"></td>
<td ID="t6base" STYLE="height:2; background-color:white"></td>
<td ID="t7base" STYLE="height:2; background-color:white; border-right:solid thin white"></td>
</tr>
<tr>
<td HEIGHT="*" COLSPAN="7" ID="tabContents" STYLE="border-left:solid thin white;border-bottom:solid thin white;border-right:solid thin white"bgcolor="#426399">Beispielinhalt</td>
</tr>
</table>
<div CLASS="conts" ID="t1Contents" align="center">
<center><font color="gold" size="5">DHTML</font>
<hr Width="60%" color="blue">
<center><font color="red" size="3"><b>Lima-City !<br>" Homepage "</b></font>
</div>
<div CLASS="conts" ID="t2Contents" align="center">
<center><font color="red" size="3"><b>Diese Seiten werden st?ndig erweitert !</b></font>
</div>
<div CLASS="conts" ID="t3Contents" align="center">
<center><font color="red" size="3"><b>das ist super ?</b></font>
</div>
<div CLASS="conts" ID="t4Contents" align="center">
<center><font color="red" size="3"><b>Javascript Probleme ? Schicken sie mir das ausgef?llte vorgefertigte Formular zu. </b></font>
</div>
<div CLASS="conts" ID="t5Contents" align="center">
<center><font color="red" size="3"><b>Wie finden Sie LIMA teams?</b></font>
</div>
<div CLASS="conts" ID="t6Contents" align="center">
<center><font color="red" size="3"><b>Warum tr?gt sich keiner ins G?stebuch ?</b></font>
</div>
<div CLASS="conts" ID="t7Contents" align="center">
<center><font color="red" size="3"><b>Naja wieder einer der die Scripte durchsucht ?</b></font>
</div> -
Das ist erstens nicht, wonach ich gefragt habe, und zweitens funktioniert das auch wieder nur im IE.
Was ich fabriziert habe funktoniert auch nur im IE und ich will eigendlich bloss wissen, was ich machen muss, um das ganze auch in anderen browsern zum laufen bringen kann! -
hm ich kann dir nur sagen das ich das letztens auch gesucht habe wie ein bl?der, uund das ich meine Seite seit dem nicht mehr IE kompatiebel mach (man kann sie sich noch anschauen, aber sie ist eben nicht mehr so "sch?n" ;) )
ansonsten f?r fast alle anderesn Browser mach es mit CSS und :hover bei fragen nur zu...
MfG JepZ
PS: wenn du es dir anschauen willst... http://jepz.milten.lima-city.de/jepzov4linux/
noch nicht fertig aber schon nen ger?st... -
Ich bin schon ein kleines Stueck weiter: wenn man nicht den Table-Data-Container sondern nur den Inhalt als Link angibt, dann klappt es auch mit dem FireFox:
<td bgcolor="#FFFFFF" onMouseOver="this.bgColor='#FF0000'" onMouseOut="this.bgColor='#FFFFFF'">
<a href="test.html">Test </a>
</td>
Aber ich will halt den ganzen Table-Data-Container als Link haben. Auf deiner Seite ist das auch net so. Ich muss auf das Wort klicken, um zu der anderen Site gelinkt zu werden. -
hm ich weis leider auch jetzt aus dem kopf nicht wie das war, aber ich kann die sagen, das das ne CSS geschichte waar, du kannst irgendwie den Link als block element deklarieren, oder so, ich weis es echt nicht mehr, war mir auf jeden ffall das letztes mal mir zuviel arbeit mich da durch zu beise, als ich mir das angeschaut habe, ich empfehle dir nur mach dich auf ne CSS seite scchlau... ich hab CSS bis vor kurzem auch nicht gemocht...
-
So ich hab jetzt was gefunden f?r dich, wo du es dir klauen kannst ;)
http://h2o.pyrokar.lima-city.de/style.css
das war die CSS datei, und hier die Seite:
http://h2o.pyrokar.lima-city.de/
;)
wenn du alles in ein script bekommen hast, postest du es uns dann? ;) w?re nett dann brauch ich es nicht auch noch machen... das entscheidende, ist das
Display:block
oder so ?hnlich...
-
CSS - gut und schoen. Ich probiere es einfach mal. Mit CSS habe ich bisher noch gar nix gemacht. Ich hoffe, dass selfhtml mir da etwas weiter helfen kann!
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage