Søg
Avatar billede xvid Seniormester
06. april 2008 - 04:33 Der er 9 kommentarer og
1 løsning

mouseover div layer

hey

jeg vil gerne have at boksen kan ses 100% når man køre musen over og når man fjerner musen igen skal den være 25% er der nogen der kan hjælpe mig med dette og helst uden css :-)?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
</head>
<body>
<div style="width:200px; height:250px; background-color:#CC0000; filter:alpha(Opacity=25);  ">div tekst ....</div>
</body>
</html>
Avatar billede Slater Ekspert
06. april 2008 - 10:39 #1
For det første: Hvorfor uden CSS? Du bruger jo allerede CSS i det eksempel.
For det andet: Det der virker KUN på Internet Explorer, men kan sagtens laves til at virke på andre browsere med lidt mere kode. Er det et bevidst valg?
Avatar billede Slater Ekspert
06. april 2008 - 10:40 #2
- Og hvad jeg glemte at sige: det kan ikke lade sig gøre uden CSS. Enten CSS via pseusoklassen :hover eller via Javascript, men CSS er ikke til at komme udenom.
Avatar billede Slater Ekspert
06. april 2008 - 10:45 #3
Men hvad jeg tror du har brug for, er noget i denne stil:

<div onmouseover="fade(this, 100)" onmouseout="fade(this, 100)">
  ...
</div>

<script type="text/javascript">

function fade(caller, value) {
  caller.style.filter = "alpha(opacity="+value+")";
  caller.style.opacity = value/100;
  caller.style.KhtmlOpacity = value/100;
  caller.style.MozOpacity = value/100;
}

</script>


Og så skal du naturligvis sætte div'ens opacity filtre til 25% fra starten. Det kommer an på om du foretrækker inline CSS eller <style>-tag'et i head'en hvordan du gør det.
Avatar billede Slater Ekspert
06. april 2008 - 10:46 #4
Og flot, så skrev jeg forkert.

<div onmouseover="fade(this, 100)" onmouseout="fade(this, 25)">

Skulle der selvfølgelig stå :)
Avatar billede xvid Seniormester
06. april 2008 - 12:34 #5
jeg kan ikke rigtig få det til at virke, jeg vil gerne have en boks der er style="WIDTH: 200px; HEIGHT: 250px; og er rød og sløret, når man kommer ind på siden er den sløret og når man flytter musen over skal den kunne ses 100 % og kan du lave det i css i stedetfor javascript :-)

<html><head><title></title>

<script type="text/javascript">
function fade(caller, value) {
  caller.style.filter = "alpha(opacity="+value+")";
  caller.style.opacity = value/100;
  caller.style.KhtmlOpacity = value/100;
  caller.style.MozOpacity = value/100;
}
</script>
</head><body>

  <div style="WIDTH: 200px; HEIGHT: 250px; BACKGROUND-COLOR: #cc0000" onmouseover="fade(this, 100)" onmouseout="fade(this, 25)">
    fsdf dfads fsdf sdf
  </div>
</body></html>
Avatar billede w13 Novice
06. april 2008 - 12:44 #6
xvid>> Javascript og CSS er to forskellige typer af programmeringssprog, hvilket vil sige at det ene kan nogle ting, mens det andet kan nogle andre.

Fade-effekten kan kun laves med CSS (alle de steder, hvor der står "style", er det jo CSS), men det at den skal skifte, når man holder musen over, _skal_ laves med JavaScript.

Så Viperines foreslag er helt korrekt.
Avatar billede Slater Ekspert
06. april 2008 - 13:44 #7
xvid - Det kan kun laves som ren CSS (uden Javascript) ved brug af :hover pseudoselectoren, og den virker desværre kun på <a>-tags i Internet Explorer 6. Derfor kan det kun laves i ren CSS, hvis kassen der fader er i et <a>-tag.

Det mest hensigtsmæssige i dit tilfælde, er at bruge den smule Javascript der skal til.
Dvs.

<html><head>
<title></title>
<style type="text/css">

#fadebox {
  width: 200px;
  height: 250px;
  background-color: #c00;
  filter: alpha(opacity=25);
  opacity: 0.25;
  -moz-opacity: 0.25;
  -khtml-opacity: 0.25;
}

</style>

<script type="text/javascript">
function fade(caller, value) {
  caller.style.filter = "alpha(opacity="+value+")";
  caller.style.opacity = value/100;
  caller.style.KhtmlOpacity = value/100;
  caller.style.MozOpacity = value/100;
}
</script>
</head>
<body>

  <div id="fadebox" onmouseover="fade(this, 100)" onmouseout="fade(this, 25)">
    fsdf dfads fsdf sdf
  </div>

</body>
</html>
Avatar billede xvid Seniormester
06. april 2008 - 13:49 #8
tak ;-)
Avatar billede xvid Seniormester
06. april 2008 - 13:56 #9
er det muligt at få den gule boks til at være klar uden at man køre musen over ;-)
<html><head>
<title></title>
<style type="text/css">

#fadebox {
  width: 200px;
  height: 250px;
  background-color: #c00;
  filter: alpha(opacity=25);
  opacity: 0.25;
  -moz-opacity: 0.25;
  -khtml-opacity: 0.25;
}
#fadebox1 {
  background-color: #ff0;
}
</style>

<script type="text/javascript">
function fade(caller, value) {
  caller.style.filter = "alpha(opacity="+value+")";
  caller.style.opacity = value/100;
  caller.style.KhtmlOpacity = value/100;
  caller.style.MozOpacity = value/100;
}
</script>
</head>
<body>

  <div id="fadebox" onmouseover="fade(this, 100)" onmouseout="fade(this, 25)">
    <div id="fadebox1">
    fsdf dfads fsdf sdf<br><br>
  </div>
  </div>

</body>
</html>
Avatar billede Slater Ekspert
06. april 2008 - 14:30 #10
Mener du at den gule kasse inde i den røde skal have 100% opacity, mens den ydre stadig kun har 25%?
I så fald, nej. Opacity'en følger med på alle elementer indeni. Hvis du vil have den til at være fuldt synlig, skal du til at lave noget meget mere kompliceret. F.eks. lave den gule kasse UNDER den røde, og give den en margin-top på noget negativt, for at flytte den op ovenpå den røde. Men så har du problemet, at den røde bliver fadet ud igen, når du holder musen over den gule.

Hvis det ikke er det du mener, må du lige uddybe :)
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 dag 14:19 Fejl Af buls i Windows
I dag 13:44 Adgang til Google konto via Ipad Af cyperbent i E-mail programmer
I går 09:50 Mobilpay svindel Af nu_igen i Andre onlineløsninger
22/0120:51 Knap til ipad Af FinnLauridsen i Excel
21/0113:53 Icloud mail via Outlook Af lbc i E-mail programmer
White papers
Flere white papers »