Søg
Avatar billede bartesque Nybegynder
08. december 2006 - 11:58 Der er 15 kommentarer og
2 løsninger

onmouseover billede, som link giver blå rammer

Hej
Jeg har skrevet denne simple ting kopieret fra hjemmseideskolen.dk

Jeg har inkluderet det der skal inkluderes i headeren, men der kommer en grim blå ramme omkring alle menubillederne?
<html>

<head>
<script type="text/javascript">
<!--
pict1=new Image(); pict1.src='forside.gif';
pict2=new Image(); pict2.src='forside2.gif';
pict3=new Image(); pict3.src='hvem.gif'
pict4=new Image(); pict4.src='hvem2.gif';
pict5=new Image(); pict5.src='produkter.gif';
pict6=new Image(); pict6.src='produkter2.gif'
pict7=new Image(); pict5.src='kontakt.gif';
pict8=new Image(); pict6.src='kontakt2.gif'
pict9=new Image(); pict5.src='english.gif';
pict10=new Image(); pict6.src='english2.gif'
//-->
</script>

<style type="text/css">
body{
color: black;
background: #999999;
}

</style>
</head>


<body >


<table width="772" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="290" colspan="3" align="center" valign="top"><img src="header1.jpg" width="772" height="290"></td>
  </tr>
  <tr>

    <td height="50" colspan="3" align="center" valign="top"><table width="772" border="0" cellspacing="0" cellpadding="0">
      <tr align="left" valign="top">

       
<td width="149" border="0" cellspacing="0" cellpadding="0"><a href="forside.htm"
onMouseover = "document.images[0].src=pict2.src"
onMouseout = "document.images[0].src=pict1.src">
<img src="forside.gif" width="149" height="50" ></a></td>

        <td width="173" border="0" cellspacing="0" cellpadding="0"><a href="os.html"<td width="149"><a href="forside.htm"
onMouseover = "document.images[0].src=pict2.src"
onMouseout = "document.images[0].src=pict1.src">
<img src="hvem.gif" width="173" height="50"></a></td>

        <td width="155" border="0" cellspacing="0" cellpadding="0"><a href="produkter.html" <td width="149"><a href="forside.htm"
onMouseover = "document.images[0].src=pict2.src"
onMouseout = "document.images[0].src=pict1.src">
<img src="produkter.gif" width="155" height="50"></a></td>


        <td width="137" border="0" cellspacing="0" cellpadding="0"><a href="kontakt.html" <td width="149"><a href="forside.htm"
onMouseover = "document.images[0].src=pict2.src"
onMouseout = "document.images[0].src=pict1.src">
<img src="kontakt.gif" width="137" height="50"></a></td>


        <td width="158" border="0" cellspacing="0" cellpadding="0"><a href="indexenglish.html" <td width="149"><a href="forside.htm"
onMouseover = "document.images[0].src=pict2.src"
onMouseout = "document.images[0].src=pict1.src">
<img src="english.gif" width="158" height="50"></a></td>
      </tr>



</table>

</td>
  </tr>
 

  </tr>
</table>





</body>
Avatar billede kinderaeg Nybegynder
08. december 2006 - 12:30 #1
Sæt style="border: 0;" på dine billeder
Avatar billede olebole Juniormester
08. december 2006 - 12:42 #2
<ole>

- og så vil alle dine mouseover/-outs ændre dette billede:
    <img src="header1.jpg" width="772" height="290">

- da det jo er det første billede i 'document.images' og alle dine handlers tager fat i document.images[0]  =)

I det hele taget ville det nok være en fordel at finde noget kode fra dette årtusinde - men problemet er, det ikke er til at finde en brugbar, dansk tutorial om webkodning ... og skal man finde én på engelsk, skal man arbejde hårdt og helst være ret god til kodning i forvejen, så man kan bedømme kvaliteten.
Det er desværre _ekstremt_ svært for en begynder at finde brugbare online-tutorials om webkodning  :o|

/mvh
</bole>
Avatar billede bartesque Nybegynder
08. december 2006 - 12:57 #3
tak for det,


og tak til ole bole !! det havde jeg også problemer med.


Og ja, det er svært som nybegynder, at finde nogle ordentlige tutorials...

Hvad skulle være nyere og "bedre" end mouseover tingen?
Avatar billede bartesque Nybegynder
08. december 2006 - 13:03 #4
Og har ikke rigtigt styr på den on mouse ting.
<script type="text/javascript">
<!--
pict1=new Image(); pict1.src='forside.gif';
pict2=new Image(); pict2.src='forside2.gif';
pict3=new Image(); pict3.src='hvem.gif'
pict4=new Image(); pict4.src='hvem2.gif';
pict5=new Image(); pict5.src='produkter.gif';
pict6=new Image(); pict6.src='produkter2.gif'
pict7=new Image(); pict7.src='kontakt.gif';
pict8=new Image(); pict8.src='kontakt2.gif'
pict9=new Image(); pict9.src='english.gif';
pict10=new Image(); pict10.src='english2.gif'
//-->
</script>

       
<td width="149" border="0" cellspacing="0" cellpadding="0"><a href="forside.htm"
onMouseover = "document.images[1].src=pict2.src" onMouseout = "document.images[2].src=pict1.src">
<img src="forside.gif" width="149" height="50" border="0" cellspacing="0" cellpadding="0"></a></td>

        <td width="173" border="0" cellspacing="0" cellpadding="0"><td width="173"><a href="hvem.htm"
onMouseover = "document.images[3].src=pict4.src"
onMouseout = "document.images[4].src=pict3.src">
<img src="hvem.gif" width="173" height="50 "border="0" cellspacing="0" cellpadding="0"></a></td>

        <td width="155" border="0" cellspacing="0" cellpadding="0"><td width="155"><a href="produkter.htm"
onMouseover = "document.images[5].src=pict6.src"
onMouseout = "document.images[6].src=pict5.src">
<img src="produkter.gif" width="155" height="50" border="0" cellspacing="0" cellpadding="0"></a></td>


        <td width="137" border="0" cellspacing="0" cellpadding="0"><td width="137"><a href="kontakt.htm"
onMouseover = "document.images[7].src=pict8.src"
onMouseout = "document.images[8].src=pict7.src">
<img src="kontakt.gif" width="137" height="50" border="0" cellspacing="0" cellpadding="0"></a></td>


        <td width="158" border="0" cellspacing="0" cellpadding="0"><td width="158"><a href="indexenglish.htm"
onMouseover = "document.images[9].src=pict10.src"
onMouseout = "document.images[10].src=pict9.src">
<img src="english.gif" width="158" height="50" border="0" cellspacing="0" cellpadding="0"></a></td>
      </tr>



Hvad er der galt?
Avatar billede kinderaeg Nybegynder
08. december 2006 - 13:05 #5
document.images er et array af de billeder der er på siden, document.images[0] er det første billede, og altså det du skal bruge, når du vil ændre billedet for forsiden, document.images[1] er andet billede (hvem.html) osv.
Avatar billede bartesque Nybegynder
08. december 2006 - 13:12 #6
Den tog lidt tid, om at sive ind, men nu kom den også. Tak
Avatar billede bartesque Nybegynder
08. december 2006 - 13:13 #7
Jeg kan bare ikke forstå hvorfor det kun vil virke i firefox og ikke IE?
Avatar billede olebole Juniormester
08. december 2006 - 13:25 #8
Der er ingen cellpadding eller cellspacing på et img-element ... det skal du under alle omstændigheder slette. Dernæst kan du lægge dine event-handlers direkte på billedet:

<a href="indexenglish.htm">
<img src="english.gif"
  onmouseover="this.src=pict10.src"
  onmouseout="this.src=pict9.src"
  width="158" height="50" border="0"></a>
Avatar billede olebole Juniormester
08. december 2006 - 13:27 #9
PS: Det er _kun_ table-elementer, der kan have cellspacing og cellpadding. Derfor bør du også slette dem i dine td-elementer (og her har du heller ikke grund til 'border'):
    <td width="149">
Avatar billede kinderaeg Nybegynder
08. december 2006 - 13:54 #10
Vil mene du skal du i noget der ligner det her, og det virker fint for mig i IE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript"><!--
  pict1=new Image(); pict1.src='forside.gif';
  pict2=new Image(); pict2.src='forside2.gif';
  pict3=new Image(); pict3.src='hvem.gif';
  pict4=new Image(); pict4.src='hvem2.gif';
  pict5=new Image(); pict5.src='produkter.gif';
  pict6=new Image(); pict6.src='produkter2.gif';
  pict7=new Image(); pict5.src='kontakt.gif';
  pict8=new Image(); pict6.src='kontakt2.gif';
  pict9=new Image(); pict5.src='english.gif';
  pict10=new Image(); pict6.src='english2.gif';
//--></script>
<style type="text/css">
body{
  color: black;
  background: #999999;
}
IMG {
  border: 0;
}
</style>
</head>
<body>
<div style="text-align: center">
<table width="772" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="5"><img src="header1.jpg" width="772" height="290" alt="header"></td>
  </tr>
  <tr>
    <td><a href="forside.htm"><img src="a.bmp" width="149" height="50" onmouseover="document.images[1].src=pict2.src" onmouseout="document.images[1].src=pict1.src" alt="forside"></a></td>
    <td><a href="hvem.htm"><img src="hvem.gif" width="173" height="50" onmouseover="document.images[2].src=pict4.src" onmouseout="document.images[2].src=pict3.src" alt="hvem"></a></td>
    <td><a href="produkter.htm"><img src="produkter.gif" width="155" height="50" onmouseover="document.images[3].src=pict6.src" onmouseout="document.images[3].src=pict5.src" alt="Produkter"></a></td>
    <td><a href="kontakt.htm"><img src="kontakt.gif" width="137" height="50" onmouseover="document.images[4].src=pict8.src" onmouseout="document.images[4].src=pict7.src" alt="kontakt"></a></td>
    <td><a href="indexenglish.htm"><img src="english.gif" width="158" height="50" onmouseover="document.images[5].src=pict10.src" onmouseout="document.images[5].src=pict9.src" alt="english"></a></td>
  </tr>
</table>
</div>
</body>
</html>
Avatar billede kinderaeg Nybegynder
08. december 2006 - 13:59 #11
Og så skal du nok ha' en "margin: auto" på diven også, for at centreringen virker i FF ;)
Avatar billede olebole Juniormester
08. december 2006 - 14:07 #12
- og så er der ingen grund til at bruge HTML-collections som document.images, når vi forhåbentlig snart skal helt af med den slags  :)

- og der er jo heller ingen grund til, at man skal helt ud i document-objektet og godt ned i dettes images-collection - blot for at finde billedet selv.
Så er det vist lidt mere 'sexy' at referere med 'this', som jeg gjorde det i (08/12-2006 13:25:47)  ;o)
Avatar billede kinderaeg Nybegynder
08. december 2006 - 14:12 #13
Ja, selvfølgelig, når man ikke skal ha' fat i et andet billede end det man "står på", er det selvfølgelig det optimale (my bad). Ellers ville jeg også foretrække at sætte id'er på billederne, og fange dem den vej igennem, hvis der skulle være tale om at ændre billeder fra andre elementer ;)
Avatar billede olebole Juniormester
08. december 2006 - 14:15 #14
Uhhhhhhh .... en bred enighed truer ...  =8-O
Avatar billede bartesque Nybegynder
09. december 2006 - 11:56 #15
Jeg fatter hat.. haha!


Men point gives i hvert fald til dem der vil have!
Avatar billede kinderaeg Nybegynder
10. december 2006 - 02:00 #16
Svar
Avatar billede olebole Juniormester
11. december 2006 - 09:37 #17
Spørg om det, du ikke forstår  =)
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 »