Søg
Avatar billede want2learn Nybegynder
07. februar 2004 - 12:21 Der er 10 kommentarer og
1 løsning

Image i en CSS fil

hej jeg laver pt en side der skal kunen bruge 2 css filer alt efter hvad brugeren vælger af css fil.

alt efter dette skal der også bruges nogle forskellige billeder.

det jeg vil vide er om hvordan jeg kan tage disse billeder og have dem i en css fil og så hente dem ind på siden så det kommer til at virke som nu !!

Eller om jeg kan tage selve min menu og sætte det ind i en inklude fil som så kommer ind i min css fil.

eller om jeg skal gøre det på en anden måde:

<html>
<head>
<title>site</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
image1 = new Image();
image1.src = "image/space.gif";

image2 = new Image();
image2.src = "image/space.gif";

image3 = new Image();
image3.src = "image/space.gif";

image4 = new Image();
image4.src = "image/space.gif";
// End -->
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600px">
<tr>
  <td height="80px"></td>
</tr>
<tr>
  <td>
  <div align="center">
  <a href="#" onmouseover="src='image/selected.gif';"onmouseout="src='image/selected.gif';"><img name="selected" src="image/selected.gif" border="0"></a><a href="#" onmouseover="image1.src='image/hover.gif';"onmouseout="image1.src='image/space.gif';"><img name="image1" src="image/space.gif" border="0"></a><a href="#" onmouseover="image2.src='image/hover.gif';"onmouseout="image2.src='image/space.gif';"><img name="image2" src="image/space.gif" border="0"></a><a href="#" onmouseover="image3.src='image/hover.gif';"onmouseout="image3.src='image/space.gif';"><img name="image3" src="image/space.gif" border="0"></a><a href="#" onmouseover="image4.src='image/hover.gif';"onmouseout="image4.src='image/space.gif';"><img name="image4" src="image/space.gif" border="0"></a>
  </div>
  </td>
</tr>
<tr>
  <td height="400px"></td>
</tr>
<tr>
  <td height="85px"></td>
</tr>
</table>
</body>
</html>
Avatar billede roenving Novice
07. februar 2004 - 13:07 #1
css kan kun sætte style på elementerne, ikke indhold ...

Så baggrundsbilleder er det nemt at sætte på med css, men forgrundsbilleder er ikke (i css2 !-) noget, man kan styre med stylesheets ...

Og jeg forstår ikke li'e, at du preloader det samme billede 4 gange ?-)

Dine javascript-variabler har ligeså lidt med dine images, som billedet af et dejligt feriested har med temperaturen udendørs !o]
Avatar billede want2learn Nybegynder
07. februar 2004 - 13:22 #2
Og jeg forstår ikke li'e, at du preloader det samme billede 4 gange ?-)
- Det er fordi jeg ikke har besluttet mig endnu for hvad de 5 hovedeemner skal være endnu derfor det samme 4 gange.

Dine javascript-variabler har ligeså lidt med dine images, som billedet af et dejligt feriested har med temperaturen udendørs !o]
- Hvad mener du vil du lige komme lidt mere ind på det!?

Så baggrundsbilleder er det nemt at sætte på med css, men forgrundsbilleder er ikke (i css2 !-) noget, man kan styre med stylesheets ...
- Okay kan du evt hjælpe med noget der kan gøre hvad jeg ønsker !??
Avatar billede roenving Novice
07. februar 2004 - 13:41 #3
Hvis du skal udskifte billeder som følge af en brugerhandling, kan du f.eks.

<script type="text/javascript">
var nr = 0;

var imgs1 = new Array();
imgs1[0] = new Image();
imgs1[0].src = "images/spacer.gif";

var imgs2 = new Array();
imgs2[0] = new Image();
imgs2[0].src = "images/spacer.gif";

var imgs3 = new Array();
imgs3[0] = new Image();
imgs3[0].src = "images/spacer.gif";

var imgs4 = new Array();
imgs4[0] = new Image();
imgs4[0].src = "images/spacer.gif";

imgs1[1] = new Image();
imgs1[1].src = "images/spacer.gif";

imgs2[1] = new Image();
imgs2[1].src = "images/spacer.gif";

imgs3[1] = new Image();
imgs3[1].src = "images/spacer.gif";

imgs4[0] = new Image();
imgs4[0].src = "images/spacer.gif";

function changeImgs(){
  nr = (nr+1)%2;
  for(i=1;5>i;i++){
    document.images['image'+i].src = eval('imgs'+i+'['+nr+'].src');
  }
}
</script>

-- og så dine images sådan:

<img name="image4" src="image/space.gif" onmouseover="this.src=imgs4[nr].src;" onmouseout="this.src=imgs4[nr].src;"border="0">

-- bemærk, at jeg har fjernet dine link-tags, da de i moderne browsere er overflødige, men hvis du skal kunne bruge det overfor ældre browsere skal de selvfølgelig med !-)
Avatar billede roenving Novice
07. februar 2004 - 13:42 #4
Hov, jeg manglede lige en konsekvens-rettelse:

...
imgs3[1].src = "images/spacer.gif";

imgs4[1] = new Image();
imgs4[1].src = "images/spacer.gif";

function changeImgs(){
...
Avatar billede want2learn Nybegynder
07. februar 2004 - 15:45 #5
okay men

1. 
<img name="image4" src="image/space.gif" onmouseover="this.src=imgs4[nr].src;" onmouseout="this.src=imgs4[nr].src;"border="0">

hvordan laver jeg evt et link til "/forum/" i den tråd hvis du siger jeg ikek behøver den gamle link metode !??

2.
Hvordan gør jeg det med at alt efter hvilken CSS fil en bruger fil køre med så køre den så også med nogle andre billeder.

Jeg har en cookie der aflæser hvilken CSS fil brugeren har valgt at bruge kan den evt også styre det med billederne !??

3.
Jeg kan ikke få den til at vise hover.gif billedet når jeg har denne code kun hvis jeg skriver 0 eller 1 i nr ang om det nu er et out eller over billede.

<html>
<head>
<title>site</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
var nr = 0;

var imgs1 = new Array();
imgs1[0] = new Image();
imgs1[0].src = "images/space.gif";

var imgs2 = new Array();
imgs2[0] = new Image();
imgs2[0].src = "images/space.gif";

var imgs3 = new Array();
imgs3[0] = new Image();
imgs3[0].src = "images/space.gif";

var imgs4 = new Array();
imgs4[0] = new Image();
imgs4[0].src = "images/space.gif";

imgs1[1] = new Image();
imgs1[1].src = "images/hover.gif";

imgs2[1] = new Image();
imgs2[1].src = "images/hover.gif";

imgs3[1] = new Image();
imgs3[1].src = "images/hover.gif";

imgs4[1] = new Image();
imgs4[1].src = "images/hover.gif";

function changeImgs(){
  nr = (nr+1)%2;
  for(i=1;5>i;i++){
    document.images['image'+i].src = eval('imgs'+i+'['+nr+'].src');
  }
}
</script>
</head>
<body bgcolor="#ffffff" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600px">
<tr>
  <td height="80px"></td>
</tr>
<tr>
  <td>
  <div align="center">
  <img name="image1" src="images/space.gif" onmouseover="this.src=imgs1[nr].src;" onmouseout="this.src=imgs1[nr].src;"border="0"><img name="image2" src="images/space.gif" onmouseover="this.src=imgs2[nr].src;" onmouseout="this.src=imgs2[nr].src;"border="0"><img name="image3" src="images/space.gif" onmouseover="this.src=imgs3[nr].src;" onmouseout="this.src=imgs3[nr].src;"border="0"><img name="image4" src="images/space.gif" onmouseover="this.src=imgs4[nr].src;" onmouseout="this.src=imgs4[nr].src;"border="0">
  </div>
  </td>
</tr>
<tr>
  <td height="400px"></td>
</tr>
<tr>
  <td height="85px"></td>
</tr>
</table>
</body>
</html>
Avatar billede roenving Novice
07. februar 2004 - 15:54 #6
1. onclick="location.href='/forum/'"

2. Ja, der hvor du aflæser cookien og tilknytter stylesheetet, sætter du også nr-variablen !-)

3. Jeg havde jo ikke lavet et helt fuldt eksempel, men så skal det være:

<img name="image1" src="images/space.gif" onmouseover="this.src=imgs1hover[nr].src;" onmouseout="this.src=imgs1[nr].src;"border="0">
<img name="image2" src="images/space.gif" onmouseover="this.src=imgs2hover[nr].src;" onmouseout="this.src=imgs2[nr].src;"border="0">
<img name="image3" src="images/space.gif" onmouseover="this.src=imgs3hover[nr].src;" onmouseout="this.src=imgs3[nr].src;"border="0">
<img name="image4" src="images/space.gif" onmouseover="this.src=imgs4hover[nr].src;" onmouseout="this.src=imgs4[nr].src;"border="0">

-- og sådan i din js-kode:

var imgs1 = new Array();
imgs1[0] = new Image();
imgs1[0].src = "images/space.gif";

var imgs1hover = new Array();
imgs1hover[0] = new Image();
imgs1hover[0].src = "images/hover.gif";

imgs1[1] = new Image();
imgs1[1].src = "images/space.gif";

imgs1hover[1] = new Image();
imgs1hover[1].src = "images/hover.gif";
Avatar billede want2learn Nybegynder
07. februar 2004 - 17:40 #7
1. OK.

3. Jamen er det ikke også sådan jeg har det, har jo rette det til !?

du har lavet:
var imgs1 = new Array();
imgs1[0] = new Image();
imgs1[0].src = "images/space.gif";

var imgs1hover = new Array();
imgs1hover[0] = new Image();
imgs1hover[0].src = "images/hover.gif";

imgs1[1] = new Image();
imgs1[1].src = "images/space.gif";

imgs1hover[1] = new Image();
imgs1hover[1].src = "images/hover.gif";

jeg skal bare fortsatte disse til nr 4 ikke sandt !??
Avatar billede roenving Novice
08. februar 2004 - 06:04 #8
Ja, du skal fortsætte den til nr 4 !-)

-- og sørge for at imgXhover er som mouseover-ting på alle img-tags !o]
Avatar billede want2learn Nybegynder
08. februar 2004 - 23:11 #9
læg lige et svar
Avatar billede roenving Novice
09. februar 2004 - 21:25 #10
Velbekomme '-)
Avatar billede roenving Novice
09. februar 2004 - 22:28 #11
-- og tak for points ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 15:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
White papers
Flere white papers »