CSS image og javascript
Jeg er ved at opdatere min side fra almindelig <image> og table design, til at bruge css med div og tableless design..Og egentligt smukt synes jeg..
MEN.. Jeg har nogle billeder jeg sætter ind, som vises rigtigt i min editor (DreamWeaver CS3) men så snart siden loades (både FF og IE) så kommer ingen af billederne frem.. :S
Kan det være at CS3 har implementeret en CSS standart som IE og FF (de er begge nyeste!) ikke har fået endnu?
Derudover har jeg puttet noget javascript ind som jeg gerne ville have til at skulle lave skift imellem mine billeder som menu-punkter.. Det er kopieret fra en side og rettet med mine billeder, men det vises heller ikke engang i min editor..
Her er lidt kode:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome to the future</title>
<style type="text/css">
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #989898;
}
.oneColElsCtr #container {
width: 46em;
background: #FFFFFF;
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px; /*1px solid #000000; */
text-align: left; /* this overrides the text-align: center on the body element. */
height:auto;
}
.oneColElsCtr #mainContent {
padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.oneColElsCtr #welcomeImage {
background-color:transparent;
background-image:url(Images/Welcome.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position:center;
height:105px;
}
</style>
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<p></p> /* er klar over jeg nok sku bruge <br> istedet for <p></p>
<p></p>
<div id="welcomeImage"></div>
<p align="center">Her skal stå min introtekst.</p>
</div>
<p></p>
<p></p>
<div align="center">
<p> her er mit javascript</p> /*indsat for at vide hvor det skulle komme */
<SCRIPT language="JavaScript">
upImage = new Image();
upImage.src = "Images/Referencer_NotSel.gif";
downImage = new Image();
downImage.src = "Images/Referencer_Sel.gif"
normalImage = new Image();
normalImage.src = "Images/Referencer_NotSel.gif";
function changeImage()
{
document.images["jsbutton"].src= upImage.src;
return true;
}
function changeImageBack()
{
document.images["jsbutton"].src = normalImage.src;
return true;
}
function handleMDown()
{
document.images["jsbutton"].src = downImage.src;
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</SCRIPT>
</div>
</div>
</body>
</html>
Billede af resultatet i en browser : http://img193.imageshack.us/i/imageproblembrowser.jpg/ (og det samme resultat i IE som FF)
Så der fra CS3: http://img8.imageshack.us/i/imageproblemeditor.jpg/
