Add hover effect to navbar

author: Jonas Kohl <git@jonaskohl.de> 2024-09-06 11:20:29 +0200
committer: Jonas Kohl <git@jonaskohl.de> 2024-09-06 11:20:29 +0200
commit: d6915cbe46dc4bbd2e5c3cd860438564f5a87524 (patch)
tree: dec75211a2dcdc634c41ce15bd56128789e5e40a
parent: f0456f71198e7a31238c92cd2a8f23315bf3488b (diff)
9 files changed, 28 insertions, 64 deletions
diff --git a/cgi/imagemap.cgi b/cgi/imagemap.cgi
deleted file mode 100755
index 156836f..0000000
--- a/cgi/imagemap.cgi
+++ /dev/null
@@ -1,55 +0,0 @@
-#!/usr/bin/perl
-
-$x_start = 7;
-$y_start = 6;
-$y_space = 6;
-$width = 106;
-$height = 34;
-
-@images = (
-    {
-        label => "Startseite",
-        link => "pages/start.html"
-    },
-    {
-        label => "Trivia",
-        link => "pages/trivia.html"
-    },
-    {
-        label => "Exklusiv",
-        link => "pages/exklusiv.html"
-    },
-    {
-        label => "Dekomp",
-        link => "pages/dekomp.html"
-    },
-    {
-        label => "L&ouml;sung",
-        link => "pages/loesung.html"
-    },
-    {
-        label => "&Uuml;ber",
-        link => "pages/about.html"
-    }
-);
-
-print "content-type: text/plain\n\n";
-
-foreach $im (@images) {
-    print '<area shape="rect" target="main" coords="';
-    print $x_start;
-    print ',';
-    print $y_start;
-    print ',';
-    print $x_start + $width;
-    print ',';
-    print $y_start + $height;
-    print '" href="';
-    print $im->{link};
-    print '" alt="';
-    print $im->{label};
-    print '">';
-    print "\n";
-
-    $y_start += $height + $y_space;
-}
diff --git a/images/blank.gif b/images/blank.gif
new file mode 100644
index 0000000..5bfd67a
--- /dev/null
+++ b/images/blank.gif
diff --git a/images/nava1.gif b/images/nava1.gif
new file mode 100644
index 0000000..0e8ab20
--- /dev/null
+++ b/images/nava1.gif
diff --git a/images/nava2.gif b/images/nava2.gif
new file mode 100644
index 0000000..41b88d9
--- /dev/null
+++ b/images/nava2.gif
diff --git a/images/nava3.gif b/images/nava3.gif
new file mode 100644
index 0000000..1925b96
--- /dev/null
+++ b/images/nava3.gif
diff --git a/images/nava4.gif b/images/nava4.gif
new file mode 100644
index 0000000..fe87799
--- /dev/null
+++ b/images/nava4.gif
diff --git a/images/nava5.gif b/images/nava5.gif
new file mode 100644
index 0000000..05f1ec7
--- /dev/null
+++ b/images/nava5.gif
diff --git a/images/nava6.gif b/images/nava6.gif
new file mode 100644
index 0000000..1674e8b
--- /dev/null
+++ b/images/nava6.gif
diff --git a/navside.html b/navside.html
index 61729b4..b61d05d 100644
--- a/navside.html
+++ b/navside.html
@@ -8,23 +8,42 @@
         left: 0;
         top: 246px;
     }
+    .navl {
+        position: absolute;
+        left: 7px;
+    }
+    .nl1 { top: 6px; }
+    .nl2 { top: 46px; }
+    .nl3 { top: 86px; }
+    .nl4 { top: 126px; }
+    .nl5 { top: 166px; }
+    .nl6 { top: 206px; }
 -->
 </style>
+<script>
+<!--
+    function nava(i) {
+        window.document["nl" + i].src = "/images/nava" + i + ".gif";
+    }
+    function blank(i) {
+        window.document["nl" + i].src = "/images/blank.gif";
+    }
+// -->
+</script>
 </head>
 
 <body background="images/woodtile.gif" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0"><!--
---><img src="images/nav.gif" usemap="#nav" border="0">
+--><img src="images/nav.gif" border="0">
+
+<a target="main" href="pages/start.html" class="navl nl1" onMouseOver="nava(1)" onMouseOut="blank(1)"><img alt="Startseite" src="/images/blank.gif" width="106" height="34" name="nl1" border="0"></a>
+<a target="main" href="pages/trivia.html" class="navl nl2" onMouseOver="nava(2)" onMouseOut="blank(2)"><img alt="Trivia" src="/images/blank.gif" width="106" height="34" name="nl2" border="0"></a>
+<a target="main" href="pages/exklusiv.html" class="navl nl3" onMouseOver="nava(3)" onMouseOut="blank(3)"><img alt="Exklusiv" src="/images/blank.gif" width="106" height="34" name="nl3" border="0"></a>
+<a target="main" href="pages/dekomp.html" class="navl nl4" onMouseOver="nava(4)" onMouseOut="blank(4)"><img alt="Dekomp" src="/images/blank.gif" width="106" height="34" name="nl4" border="0"></a>
+<a target="main" href="pages/loesung.html" class="navl nl5" onMouseOver="nava(5)" onMouseOut="blank(5)"><img alt="L&ouml;sung" src="/images/blank.gif" width="106" height="34" name="nl5" border="0"></a>
+<a target="main" href="pages/about.html" class="navl nl6" onMouseOver="nava(6)" onMouseOut="blank(6)"><img alt="&Uuml;ber" src="/images/blank.gif" width="106" height="34" name="nl6" border="0"></a>
 
 <img src="images/musik.gif" usemap="#mus" border="0" id="musik">
 
-<map name="nav">
-    <area shape="rect" target="main" coords="7,6,113,40" href="pages/start.html" alt="Startseite">
-    <area shape="rect" target="main" coords="7,46,113,80" href="pages/trivia.html" alt="Trivia">
-    <area shape="rect" target="main" coords="7,86,113,120" href="pages/exklusiv.html" alt="Exklusiv">
-    <area shape="rect" target="main" coords="7,126,113,160" href="pages/dekomp.html" alt="Dekomp">
-    <area shape="rect" target="main" coords="7,166,113,200" href="pages/loesung.html" alt="L&ouml;sung">
-    <area shape="rect" target="main" coords="7,206,113,240" href="pages/about.html" alt="&Uuml;ber">
-</map>
 <map name="mus">
     <area shape="rect" target="music" coords="40,0,76,16" href="music.html" alt="An">
     <area shape="rect" target="music" coords="82,0,120,16" href="nomusic.html" alt="Aus">
author	Jonas Kohl <git@jonaskohl.de>	2024-09-06 11:20:29 +0200
committer	Jonas Kohl <git@jonaskohl.de>	2024-09-06 11:20:29 +0200
commit	d6915cbe46dc4bbd2e5c3cd860438564f5a87524 (patch)
tree	dec75211a2dcdc634c41ce15bd56128789e5e40a
parent	f0456f71198e7a31238c92cd2a8f23315bf3488b (diff)