Avatar billede kwudo Nybegynder
09. februar 2008 - 21:53 Der er 8 kommentarer og
1 løsning

Behold farve ved klik på fane

Hej alle sammen :)

En af mine venner har lavet et design i css/xhtml, hvor der er 5 faner, hvor man så holder musen over bliver de røde.

Kan det lade sig gøre at de forbliver røde når man trykker på dem, og når man så vælger en anden bliver den rød istedet for.

For bedre at forstå det kan i se med her:

http://www.ziimx.zeekoo.dk/hjemmesiden

P.s. er i tvivl om det er css eller JavaScript, men prøver her først :)
Avatar billede olebole Juniormester
09. februar 2008 - 23:22 #1
<ole>

Linket virker vist ikke så godt  :)

/mvh
</bole>
Avatar billede kwudo Nybegynder
09. februar 2008 - 23:25 #2
Nej det lige blevet flyttet, sorry :D

www.intetliv.dk/ungesliv
Avatar billede olebole Juniormester
10. februar 2008 - 01:21 #3
Du lader PHP udskrive dette på forsiden:

<div class="knap"><img src="images/btn/forsider.jpg" name="forside" width="107" height="27" border="0" id="forside" alt="" /></div>

- og på samme måde på de andre sider
Avatar billede kwudo Nybegynder
10. februar 2008 - 02:00 #4
hvordan skal jeg lade php udskrive det, efter hvad side den er på eller?
Avatar billede kwudo Nybegynder
10. februar 2008 - 02:21 #5
<div class="knap"><a href="forside.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forside','','images/btn/forsiderollover.jpg',1)"><img src="images/btn/forsider.jpg" name="forside" width="107" height="27" border="0" id="forside" alt="" /></a></div>

<div class="knap"><a href="brugere/opret.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Opret','','images/btn/opretrollover.jpg',1)"><img src="images/btn/opret.jpg" name="Opret" width="107" height="27" border="0" id="Opret" /></a></div>

Sådan her ser 2 af knapperne ud (;
Avatar billede kwudo Nybegynder
10. februar 2008 - 18:32 #6
<script type="text/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 MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

Js koden, havde jeg glemt (:
Avatar billede olebole Juniormester
10. februar 2008 - 20:42 #7
Prøv noget à la:

<script type="text/javascript">
var sActive = "forside";
function swap(oLnk, sSrc) {
    var oImg = oLnk.getElementsByTagName("img")[0];
    var oActive = document.getElementById(sActive);
    if (oImg==oActive) return;
    if (oImg.getAttribute("defSrc")=="") oImg.setAttribute("defSrc", oImg.getAttribute("src"));
    oImg.setAttribute("src", sSrc);
}
function swapRestore(oLnk) {
    var oImg = oLnk.getElementsByTagName("img")[0];
    var oActive = document.getElementById(sActive);
    if (oImg==oActive) return;
    oImg.setAttribute("src", oImg.getAttribute("defSrc"));
}
</script>

<div class="knap"><a href="forside.php" onmouseover="swap(this, 'images/btn/forsiderollover.jpg')" onmouseout="swapRestore(this)"><img id="forside" src="images/btn/forsider.jpg" width="107" height="27" border="0" alt="" /></a></div>

<div class="knap"><a href="brugere/opret.php" onmouseover="swap(this, 'images/btn/opretrollover.jpg')" onmouseout="swapRestore(this)"><img id="opret" src="images/btn/opret.jpg" width="107" height="27" border="0" alt="" /></a></div>

- ganske utestet  =)
Avatar billede kwudo Nybegynder
10. februar 2008 - 20:54 #8
tjek siden nu:

http://intetliv.dk/ungesliv/

ser ikke helt ud til at virke, hehe :)
Avatar billede kwudo Nybegynder
11. februar 2008 - 17:28 #9
Tak for hjælpen olebole, men fandt en anden løsning:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ungesliv - Unges Mødested På Nettet</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />


<base target="iframe" />
<script type="text/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 MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="style/login.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="ramme">

<div id="top_ramme">

<div id="top_logo">

<div id="login_box">
<iframe allowTransparency="true" src="brugere/index.php" name="login_Box" width="400" height="70" scrolling="no" frameborder="0"></iframe></div>

</div><!-- top_logo slut -->

</div><!-- Top ramme slut -->

<div id="venstre_menu_ramme">
<div id="menu">
  <table  width="200" border="0">
    <tr>
      <td align="center"><a href="#">Artikler</a></td>
    </tr>
    <tr>
      <td align="center"><a href="#">Opslagstavle</a></td>
    </tr>
    <tr>
      <td align="center"><a href="#">Nyheder</a></td>
    </tr>
    <tr>
      <td align="center"><a href="#">Retningslinjer</a></td>
    </tr>
  </table>
</div><!-- Menu slut -->
<div id="reklame"></div><!-- Reklame slut -->
</div><!-- Venstre menu ramme slut -->

<div id="content_ramme">

<div id="top_menu">

<div class="knap"><? if($_GET[page] == "main" || ($_GET[page] == "")) { ?><img src="images/btn/forsiderollover.jpg" name="forside" width="107" height="27" border="0" id="forside" alt="" /><? } else { ?><a href="?page=main" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('forside','','images/btn/forsiderollover.jpg',1)"><img src="images/btn/forsider.jpg" name="forside" width="107" height="27" border="0" id="forside" alt="" /></a><? } ?></div>

<div class="knap"><? if($_GET[page] == "brugere/opret") { ?><img src="images/btn/opretrollover.jpg" name="opret" width="107" height="27" border="0" id="opret" alt="" /><? } else { ?><a href="?page=brugere/opret" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('opret','','images/btn/opretrollover.jpg',1)"><img src="images/btn/opret.jpg" name="opret" width="107" height="27" border="0" id="opret" alt="" /></a><? } ?></div>

<div class="knap"><a href="debat/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('debat','','images/btn/debatrollover.jpg',1)"><img src="images/btn/debat.jpg" name="debat" width="107" height="27" border="0" id="debat" alt="" /></a></div>

<div class="knap"><a href="brugere/find.php" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('find','','images/btn/findrollover.jpg',1)"><img src="images/btn/find.jpg" name="find" width="107" height="27" border="0" id="find" alt="" /></a></div>

<div class="knap"><a href="kontakt/" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('kontakt','','images/btn/kontaktrollover.jpg',1)"><img src="images/btn/kontakt.jpg" name="kontakt" width="107" height="27" border="0" id="kontakt" alt="" /></a></div>

<div id="sog">
<input style="width:90px; margin-left:50px; margin-top:3px;" name="" type="text" />
</div><!-- Sog slut -->

</div><!-- top menu slut -->



<div class="indhold" id="content">

<?
if($_GET[page] == "")
{
$site = "main.php";
} else {
$site = $_GET[page].".php";
}

include("$site");

?>

</div><!-- Content slut -->

</div><!-- Content ramme slut -->

<div id="bund_ramme">

<div id="bund"></div>

</div><!-- Bund ramme slut -->


</div><!-- Ramme slut -->
</body>
</html>


Det er dog kun de to første knapper der er lavet her :)
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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