Søg
Avatar billede tulip Nybegynder
29. november 2006 - 18:26 Der er 14 kommentarer og
1 løsning

Hvordan kan man lave et TEKST-link ovenpå et billede?

Hej.
Jeg er ikke så god til det der med HTML endnu, så jeg har lige et spørgsmål.
Hvordan skriver man noget tekst ovenpå et billede og derefter laver et link på teksten. Jeg kan godt finde ud af at lave et link, men jeg kan som sagt ikke finde ud af at skrive ovenpå et billede.
Avatar billede simplus Nybegynder
29. november 2006 - 18:35 #1
Bare lav en tabel hvori billedet står som baggrund?

<table border="0">
<tr>
<td style="background-image: url(billede.gif);">
<a href="#">Dit link</a>
</td>
</tr>
</table>
Avatar billede simplus Nybegynder
29. november 2006 - 18:37 #2
Du kan evt. skifte tabellen ud med en <div>
Avatar billede simplus Nybegynder
29. november 2006 - 18:38 #3
Hvis du helst vil undgå at bruge css og kun gøre det i html er dette også muligt:

<table background="dit_billede.gif">
<tr>
<td>
<a href="#">DIN TEKST</a>
</td>
</tr>
</table>
Avatar billede tulip Nybegynder
29. november 2006 - 18:45 #4
Jeg kan ikke få det til at virke...
Er det fordi jeg i forvejen skriver i en tabel hvor et andet billede er som baggrund?
Der er et billede som baggrund, hvor der skal være et billede ovenpå med tekst ovenpå
Avatar billede tulip Nybegynder
29. november 2006 - 18:48 #5
Det er den der hedder blankbutton3.jpg hvor teksten skal være på





<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">


<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/topbkg.gif">
  <tr>
    <td width="50%">
      <p align="right"><img border="0" src="img/toplogo.gif" width="648" height="106"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1%"><img border="0" src="img/midleft.gif" width="177" height="35"></td>
    <td width="97%"></td>
    <td width="1%"><img border="0" src="img/rightcornt.gif" width="35" height="35"></td>
    <td width="1%" background="img/rightsidebkg.gif"><img border="0" src="img/rightsidebkg.gif" width="24" height="17"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="%" background="img/sidebkg.gif" valign="top"><img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank3.jpg" width="55" height="30"><br> 
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30">
Avatar billede tulip Nybegynder
29. november 2006 - 18:51 #6
Det er ikke blankbutton3.jpg, men i stedet buttonblank3.jpg
Avatar billede simplus Nybegynder
29. november 2006 - 18:52 #7
Ja det kan du sagtens, bare indsæt en ny tabel som jeg viste dig istedet for.. prøv dette:


<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">


<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/topbkg.gif">
  <tr>
    <td width="50%">
      <p align="right"><img border="0" src="img/toplogo.gif" width="648" height="106"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1%"><img border="0" src="img/midleft.gif" width="177" height="35"></td>
    <td width="97%"></td>
    <td width="1%"><img border="0" src="img/rightcornt.gif" width="35" height="35"></td>
    <td width="1%" background="img/rightsidebkg.gif"><img border="0" src="img/rightsidebkg.gif" width="24" height="17"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="%" background="img/sidebkg.gif" valign="top"><img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <table background="img/buttonblank3.jpg" width="55" height="30"><tr><td><a href="#">Hello</a></td></tr></table><br> 
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30">

PS. Der var to billeder der hed næsten det samme, det ene hed buttonblack.gif og det andet buttonblank3.jpg - jeg indsatte linket på den sidstnævnte
Avatar billede tulip Nybegynder
29. november 2006 - 18:59 #8
Rigtig mange tak.
Lige et sidste spørgsmål hvis du stadig er der, kan man centrere det link der står ovenpå billedet?
Avatar billede simplus Nybegynder
29. november 2006 - 19:03 #9
ja da

brug denne istedet:

<body topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" marginheight="0" marginwidth="0" bgcolor="#FFFFFF">


<table border="0" width="100%" cellspacing="0" cellpadding="0" background="img/topbkg.gif">
  <tr>
    <td width="50%">
      <p align="right"><img border="0" src="img/toplogo.gif" width="648" height="106"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="1%"><img border="0" src="img/midleft.gif" width="177" height="35"></td>
    <td width="97%"></td>
    <td width="1%"><img border="0" src="img/rightcornt.gif" width="35" height="35"></td>
    <td width="1%" background="img/rightsidebkg.gif"><img border="0" src="img/rightsidebkg.gif" width="24" height="17"></td>
  </tr>
</table>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <tr>
    <td width="%" background="img/sidebkg.gif" valign="top"><img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <table background="img/buttonblank3.jpg" width="55" height="30" style="text-align: center;"><tr><td><a href="#">Hello</a></td></tr></table><br> 
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30"><br>
      <img border="0" src="img/buttonblank.gif" width="164" height="30">
Avatar billede tulip Nybegynder
29. november 2006 - 19:10 #10
Mange tak. Hvis du vil have point, kan du så ikke lige lave et svar som "svar"
Kan man egentlig rykke teksten på billedet 3 mellemrum ind, eller sådan noget?
Avatar billede simplus Nybegynder
29. november 2006 - 19:15 #11
Ja da, ændre linien:

<table background="img/buttonblank3.jpg" width="55" height="30" style="text-align: center;"><tr><td><a href="#">Hello</a></td></tr></table><br> 

til:

<table background="img/buttonblank3.jpg" width="55" height="30" style="text-align: center; left-padding: 3px;"><tr><td><a href="#">Hello</a></td></tr></table><br> 

Og jeg samler slet ikke på point. Læg selv et svar og snup dem selv :-)

Glad for at kunne hjælpe.
Avatar billede tulip Nybegynder
29. november 2006 - 19:44 #12
tak. så lukker jeg nu.
Avatar billede simplus Nybegynder
29. november 2006 - 19:50 #13
:-)
Avatar billede tulip Nybegynder
30. november 2006 - 09:52 #14
Den virker altså ikke den sidste.
Avatar billede olebole Juniormester
30. november 2006 - 10:55 #15
<ole>

Brug CSS i stedet. At bruge rene HTML-attributter har været forældet i snart 10 år, så det er nok på tide at komme videre  ;o)

Således har der f.eks. aldrig eksisteret en height-attribut på et tabel-element, så hvis du vil skrive en kode, der kan kaldes HTML - og lave din tabel i en bestemt højde - er du nødt til at sætte højden med CSS  ;o)

/mvh
</bole>
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 13:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
22/0720:19 DVB T2 tuner med optagefunktion Af ErikHg i Andet hardware
20/0716:00 Fildeling mellem 2 windows 11 systemer Af knudg i Windows
White papers
Flere white papers »