webForumDet fria alternativet

Opacity problem i IE

12 svar · 907 visningar · startad av kraeftan

kraeftanMedlem sedan juli 200782 inlägg
#1

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 -->
tantenMedlem sedan nov. 20051 658 inlägg
#2

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.

kraeftanMedlem sedan juli 200782 inlägg
#3

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>
QuidMedlem sedan juni 20004 270 inlägg
#4

Kan du inte sätta class på img-taggen istället?

tantenMedlem sedan nov. 20051 658 inlägg
#5
<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;

}
tantenMedlem sedan nov. 20051 658 inlägg
#6

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.

kraeftanMedlem sedan juli 200782 inlägg
#7

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>
tantenMedlem sedan nov. 20051 658 inlägg
#8

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.

kraeftanMedlem sedan juli 200782 inlägg
#9

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?

tantenMedlem sedan nov. 20051 658 inlägg
#10

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>
zcorpanMedlem sedan dec. 20042 269 inlägg
#11

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.

kraeftanMedlem sedan juli 200782 inlägg
#12

nu hajjar jag inte vad du menar bakom? kan du visa ett exempel genom kod?

tantenMedlem sedan nov. 20051 658 inlägg
#13

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... :-)

Genererad på 404 ms · cache AV · v20260730165559-full.f96bc7eb