Avatar billede mikkeljans Nybegynder
25. januar 2002 - 23:04 Der er 15 kommentarer og
2 løsninger

Interaktivt Baggrundsbillede?

Jeg er igang med at lave en hjemmeside i Dreamweaver..
Jeg har lavet et billede med en knap og et billede hvor knappen er trykket ned, så når pilen går ind over knappen trykker den ned.
Jeg bruger de to billedere til alle mine knapper i menuen for at gøre siden hurtigere at vise frem så computeren kun skal download 2 billedere.

Planden var så at skrive med normal skrift i Dreamwaver over billedet.. Men jeg kan ikke skrive oven på et billede og jeg kan ikke ændre på et bagrundsbillede vis pilen kører hen over.

Så mit spørgsmål er:
Kan man lave den samme effect med RollOver images med Baggrunds billedere så jeg kan skrive tekst oven på.
Eller er det muligt at skrive tekst oven på et billede hvis ikke det bruges som baggrund?
Avatar billede jacob_m Nybegynder
25. januar 2002 - 23:15 #1
I Dreamweaver kan man ikke sætte tekst oven på billeder (kun baggrund) men så vidt jeg har erfaret mig kan man ikke lave interaktive baggrunde.. Så der er vist ikke nogen vej uden om at du må lave menuen i flere filer....
Avatar billede karsten_larsen Praktikant
26. januar 2002 - 03:54 #2
Spørgsmål 1:
Ja/Nej

Ja:
Metode 1:
den nemmeste måde er at lave to billeder som du bruger til hver knap. Det er det som alle stort set gør. Du kan bruge søsterprogrammet Fireworks til at lave knapper. Sitet www.mr-klinikken.dk er f.eks. kun lavet i Fireworks og da eksporteret til Dreamweaver. Du kan downloade en prøve version i 30 dage fra www.macromedia.com.

Hvis du gerne vil have en hurtig download tid, kan du vælge at slice (dele) dit billede op i mindre enheder. Eller at sætte en behavior på et område af siden som så preloader billeder til de efterfølgende sider.

Metode 2:
På dit billede kan du vælge et lave et hotspot, hvor til du kan lave et link. Men billedet ændre sig ikke som i rollover, men en hånd kommer frem.

Nej: baggrundsbillede er et baggrundsbillede og kan som sådan ikke ændres til brug for roll over.

Spørgsmål 2:
Ja:
Du kan vælge at bruge layers (lag) som kan lægges oven på hinanden. Et lag med et billede og dernæst et lag med tekst.

:-) karsten_larsen
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 10:06 #3
Hvordan bruger jeg Layers i Dreamweaver?

Er det slet ikke muligt at lave en kode der ændre baggrundbilledet når pilen kører hen over?
Det skulle man da tro.
Avatar billede karsten_larsen Praktikant
26. januar 2002 - 11:06 #4
Der er det ved layers at det er fast på siden. Dog kan du få et layers til at flytte sig, når der scrolls. Søg på nogle af de svar, der er omkring det på eksperten. Der er nogle gode forklaringer.

Du finder layers i menuenvindueet common første kolonne tredie række.Ellers under insert i menubjælken.

Hvad mener du helt præcis med baggrundsbillede? Er det baggrundsbillede for knap når musen er hen over eller er det eksempelvis den hvide farve her på eksperten?


:-) Karsten
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 11:09 #5
Den hvide farve er en baggrunds farve.. Jeg skal have et baggrunds billedet til at ændre sig.. Det er vel det samme tror jeg
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 11:11 #6
Til det du vil lave er der kun en metode, alt andet er ren overkill.
For det første loader mange små billeder meget hurtigere en få store, og for det andet tager javascript også tid at loade - så layersløsningen er ren overkill.

Du laver simpelthen din din menu i dit grafikprogram, både med alm. og mouseoverbillede.
Dvs. at har du 4 menupunkter, skal du have 8 billeder.
I dreamweaver laver du så en selvstændig tabel til din menu, fx- med 4 rows.
I hver celle siger du så "Insert Rollover Image".
Færdig :o)
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 11:14 #7
Ja, men så kommer der til at være 14 billedere man skal download..
Det er det der er pointen i at kun bruge 2 billedere hvis jeg kunne ændre på mit baggrundsbilledet. Så skal man kun download 2 billedere.. Det gør siden langt hurtigere at hente.
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 11:17 #8
Nej det gør ikke :)
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 11:17 #9
Så er det fordi du ikke oprimerer dine billeder.
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 11:19 #10
2 billedere er hurtigere at hente end 14..
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 11:23 #11
To store billeder er ikke..du ved vist ikke hvad du snakker om.

Men bortset fra det kan du skrifte din "bg" på denne måde - paste det ind i DW, så ser du metoden i det.

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function P7_autoLayers() { //v1.2 by PVII
var g,b,k,f,args=P7_autoLayers.arguments;
var a = parseInt(args[0]);if(isNaN(a))a=0;
if(!document.p7setc) {p7c=new Array();document.p7setc=true;
  for (var u=0;u<10;u++) {p7c[u] = new Array();}}
for(k=0; k<p7c[a].length; k++) {
  if((g=MM_findObj(p7c[a][k]))!=null) {
  b=(document.layers)?g:g.style;b.visibility="hidden";}}
for(k=1; k<args.length; k++) {
  if((g=MM_findObj(args[k])) != null) {
  b=(document.layers)?g:g.style;b.visibility="visible";f=false;
  for(j=0;j<p7c[a].length;j++) {
    if(args[k]==p7c[a][j]) {f=true;}}
  if(!f) {p7c[a][p7c[a].length++]=args[k];}}}
}
//-->
</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<div id="Layer1" style="position:absolute; left:18px; top:19px; width:127px; height:170px; z-index:1; background-color: #FF00FF; layer-background-color: #FF00FF; border: 1px none #000000"></div>
<div id="Layer2" style="position:absolute; left:18px; top:19px; width:127px; height:170px; z-index:2; background-color: #00FFFF; layer-background-color: #00FFFF; border: 1px none #000000; visibility: hidden"></div>
<div id="Layer3" style="position:absolute; left:18px; top:19px; width:127px; height:170px; z-index:3">
  <div align="center">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p><a href="#" onMouseOver="P7_autoLayers(0,'Layer2')" onMouseOut="P7_autoLayers(0,'Layer1')">Menu 1</a></p>
  </div>
</div>
</body>
</html>
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 11:29 #12
Hvad gør jeg så hvis jeg gerne vil bytte farverne ud med mine billedere?
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 11:31 #13
Du sletter farverne i layersne, indsætter dit alm. billede i layer1, dit overbillede i layer2, og tilpasser layersstørrelsen til billederne.

Til layer3 hvori du skal ha' tekst, ville jeg nok indsætte en tabel til at holde styr på teksten.
Avatar billede mikkeljans Nybegynder
26. januar 2002 - 14:53 #14
Kan ikke få det til at virke.. Jeg tror bare jeg laver 14 billedere istedet selvom det vil tage lang tid at loade.
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 15:23 #15
Hvorfor kan du ikke få det til at virke - løsningen er jo ligefor.
Avatar billede pelkjaer Nybegynder
26. januar 2002 - 15:25 #16
Ellers kan du sende dine 2 billeder samt menupunkter (tekst) til webmaster@peterelkjaer.dk - så skal jeg lave det til dig, evt. som et Library Item.
Avatar billede karsten_larsen Praktikant
26. januar 2002 - 15:59 #17
-> Mikkenjans
Hvis du vil gøre dit webdesign liv lettere så prøv Fireworks! Det kan det som du efterlyser. Der er en udførlig og visuel illustration, hvordan du skal gøre.
:-) Karsten
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
Kurser inden for grundlæggende programmering

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.

Du kan også logge ind via nedenstående tjenester