HTML & CSSur HTML, XHTML & CSS
12 svar · 907 visningar · startad av kraeftan
Har gjort en sida med opacity på imap och.
I IE så funkar inte imapen om jag har opacity på den.
Var kan felet ligga?
url till sidan det handlar om http://www.djdragonfly.se/Stachmo/index.php
"Index" sidan under där imapen befinner sig:
body {
background-color:#FFFFFF;
font-family: Verdana; font-size: 12px;
overflow-x:hidden;
overflow-y:scroll;
}
{
margin:0px;
overflow:hidden;
background:#000000;
}
table.bildmeny td img.menyknapp {
cursor:pointer;
}
td.menyknapp {
cursor:pointer;
}
</style>
<script src="sleight.js"></script>
</head>
<body>
<td align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">
<br>
<!-- BILDMENY START -->
<table width="550" cellspacing="0" cellpadding="0">
<tr>
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map>
<!-- BILDMENY SLUT -->
Jag gissar att det är IE6 du skriver om
Försök med detta...
Lägg denna i head
<!--[if lte IE 6]>
<style type="text/css">
.byt{
opacity: 0.5;
filter: alpha(opacity = 50);
}
</style>
<![endif]-->
Och sedan sätter du class="byt" på dina bilder.
Kanske fungerar det.
Men du måste då ta bort j.s-länken också, för det är där felet finns att länkarna inte fungerar.
Om inte prova med j.s. forumet... kanske kan någon se i ditt j.s-script vad som inte fungerar.
Allt omkring funkar bra i IE 6 förutom imapen. När jag tog bort js scriptet så försvann opacity från knappmenyn. Men jag har provat <td class="byt"> på allt annat o det funkar. Men det vill inte på imapen :( jag har gjort så här iaf titta nedan vet inte om det är rätt.
<td class="byt">
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map></td>
Kan du inte sätta class på img-taggen istället?
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map" class="byt">
Men så har du fått det lite tokigt i head.
lägg till slut på kommentaren sist
</style>
<![endif]--> [1] såg att jag inte fick med hela när jag klistrade...
och vad vill du med detta?
body {
background-color:#FFFFFF;
font-family: Verdana; font-size: 12px;
overflow-x:hidden;
overflow-y:scroll;
}
margin:0px;
overflow:hidden;
background:#000000;
}
Om du tittar i FF så kan du se att du kommenterat bort allt ner till
<!-- TOPMENY START -->
Vilket gör att ingenting fungerar annat än i IE6 nu om du undrar.
Här är hela index filen, problemet kvarstår när det gäller imapen i IE. Kan ni kontrollera så allt stämmer nedan.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Stachmo</title>
<!--[if lte IE 6]>
<style type="text/css">
.byt{
opacity: 0.6;
filter: alpha(opacity = 60);
}
</style>
<![endif]--> [1]
<style>
body {
table.bildmeny td img.menyknapp {
cursor:pointer;
}
td.menyknapp {
cursor:pointer;
}
</style>
</head>
<body>
<table align="center" height="0%" cellspacing="0" cellpadding="0">
<tr valign="center">
<td>
<table style="width:1024px;height:900px;">
<tr>
<td align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">
<!-- TOPMENY START -->
<table width="550" cellspacing="0" cellpadding="0">
<tr>
<td class="byt">
<img src="gfx/topen1.png" onmouseover="src='gfx/topen1.png'" onmouseout="src='gfx/topen1.png'" onclick="_self.location.href='index.php'" width=650 height=117></td>
</tr>
</table>
<!--TOPMENY SLUT -->
<br>
<!-- BILDMENY START -->
<table width="550" cellspacing="0" cellpadding="0">
<tr>
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map" class="byt">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map></byt>
<!-- BILDMENY SLUT -->
</tr>
</table>
<br>
<!-- IFRAME START -->
<table width="650" cellspacing="0" cellpadding="0">
<tr>
<td class="byt">
<iframe src="news.php" name="main" width="650" height="420" scrolling="auto" frameborder="0" allowtransparency="true">
</iframe></td>
</tr>
</table>
<!--IFRAME SLUT -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</html>
Jätteledsen... men ser nu att jag skrev fel när jag kopierade din img. det var meningen att class skulle komma inne i den. Ögat lurades förmodligen av "meny_Map" :r
så prova med att ändra detta till
<td class="byt">
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map">
<map name="meny_Map">
till
<td>
<img src="gfx/bilder/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map" class="byt">
<map name="meny_Map">
Så hade du fått med [1] när du kopierade min kod till css:en. Var meningen att det skulle ha blivit liten text där, här på sidan.
Uppe i css ska du ändra <style> till <style type="text/css">
body {
table.bildmeny td img.menyknapp {
cursor:pointer;
}
Fortfarande fel... men behöver du använda classen? Och ska du inte ange något för body som sedan måste ha en }sist. innan table.bil...osv. börjar.
Sedan finns det mycket fel i din kod som har att göra med vad som är tillåtet och inte, vad man inte bör göra osv, men det gällde ju inte din fråga... men innan du kommer för långt så råder jag dig att använda Doctype och kolla sidan i en validator så det blir rätt från början.
hehe när jag använder validatorn så får jag typ kasta halva sdan o massa saker försvinner. Hm hur mycket ska jag kasta bort från sidan?
Nu gjorde jag så att jag fixade till din kod så att den validerar för den "snällaste" doctypen, så du kan se vad du gör under tiden du jobbar.
Jag gissar att du hittade det du gjort på webdesignskolan... och man ska nog tänka till minst tio gånger innan man använder deras tutorials skarpt. Får en känsla av att de gjorde mycket på 90-talet som de sedan inte ändrat för att de ska passa till dagens standard.
Läs vidare om varför man inte ska använda tabeller för design, varför man inte bör använda bilder i menyn.
Byt gärna ut den doctypen som jag använt till
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
eller
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
och se vad det är som blir fel och jobba vidare med den, så lär man sig mycket under tiden.
Kan säga att de fel du får är sådant som så småningom kommer att försvinna... s.k. deprecated element,sådant som border, align m.fl.
cellspacing och cellpadding, som också hör dit tog jag bort och lade in i css i stället för att visa dig ett alternativ.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<title>Stachmo</title>
<!--[if lte IE 6]>
<style type="text/css">
.byt{
opacity: 0.6;
filter: alpha(opacity = 60);
}
</style>
<![endif]-->
<style type="text/css">
table{
margin:0 0 20px 0;
padding: 0px;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<table style="width:1024px;height:900px;">
<tr>
<td class="bg" align="center" style="background-image:url('gfx/bg.jpg');background-position:absolute:top center;background-repeat:no-repeat;padding:0px 0px 0px 0px;">
<!-- TOPMENY START -->
<table>
<tr>
<td>
<img src="gfx/topen1.png" onmouseover="src='gfx/topen1.png'" onmouseout="src='gfx/topen1.png'" onclick="_self.location.href='index.php'" width=650 height=117 class="byt" alt=""></td>
</tr>
</table>
<!--TOPMENY SLUT -->
<!-- BILDMENY START -->
<table>
<tr><td>
<img src="gfx/meny.png" width="650" height="43" border="0" alt="" usemap="#meny_Map" class="byt">
<map name="meny_Map">
<area shape="rect" alt="" coords="538,13,592,28" href="gastbok.php" target="main">
<area shape="rect" alt="" coords="464,13,527,28" href="contact.php" target="main">
<area shape="rect" alt="" coords="365,13,453,28" href="downloads.php" target="main">
<area shape="rect" alt="" coords="307,13,354,28" href="games.php" target="main">
<area shape="rect" alt="" coords="241,13,296,28" href="photos.php" target="main">
<area shape="rect" alt="" coords="162,13,231,27" href="members.php" target="main">
<area shape="rect" alt="" coords="108,13,152,28" href="media.php" target="main">
<area shape="rect" alt="" coords="57,13,97,28" href="news.php" target="main">
</map>
</td></tr>
</table>
<!-- BILDMENY SLUT -->
<!-- IFRAME START -->
<table>
<tr>
<td class="byt">
<iframe src="news.html" name="main" width="650" height="420" scrolling="auto" frameborder="0">
</iframe></td>
</tr>
</table>
<!--IFRAME SLUT -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Testa lägga bilden bakom usemap-<img>n, och ändra usemap-<img>n till en transparent gif så man ser den riktiga bilden som ligger bakom.
nu hajjar jag inte vad du menar bakom? kan du visa ett exempel genom kod?
Ser att menybilden finns i gfx/bilder/meny.png.
Och kanske är det så att detta inte fungerar i alla webläsare och att då fungerar det med en gif-bild, som zcorpan säger.
Finns ställen på nätet där man kan få en screenshot på sidan, om folk här på forumet inte säger till... :-)