Antworten auf deine Fragen:
Neues Thema erstellen

[Brauche hilfe] Navigationsbutton mit 4 Bildern

X

XIIZQ

Noch nicht viel geschrieben

Hallo,

Ich möchte gerne eine Navigationsleiste machen für mein clan,
ich bin leider kein coder, sondern eher hobbycoder der ab und
zu was macht ^^°

Mein problem ist folgenes, ich habe ein Mouseover effekt via
js eingebaut, aber nur mit 2 bildern.

PHP: 
<a href="?m=news"
onMouseOver="austausch1.src='gfx/news_hover.gif';"
onMouseOut="austausch1.src='gfx/qb_hp_under_04.png';"><img src="gfx/qb_hp_under_04.png" border="0" width="113"height="31" name="austausch1"></a><a href="?m=team"
ich habe jetzt 4 bilder, wie kann ich das ganze umschreiben damit
es klappt, oder hat evtl. jemand schon was fertiges? wäre super wenn
man mir helfen könnte. habe einmal bild 1=normal 2=over 3=aktiv 4=aktivover
kann man sowas eigtl mit 4 machen?

mfg
 

X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

danke, da ist aber nur eine grafikdatei die sich immer verschiebt,
das ist bissle easy aber auch nicht wirklich das was ich gesucht habe,
da ich keine ahnung von gfx habe ^^° habe die grafikdatein nur
einzelnd hier liegen, gibt es da nichts anderes?

mfg
edit: der link mit dem tut ist gut, die demo hab ich mir angeguckt, aber
das aktiv bleiben funzt nicht bzw. ist nicht dabei o0
edit2: bild 1 und 2 sind wenn nicht auf seite a und 3 und 4 wenn auf der seite a
ist
 
Zuletzt bearbeitet:
K

KaisyTom

Aktives Mitglied

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

Bin mir jetzt nicht sicher was du meinst... aber vielleicht hilft dir das:
Code: 
.button{ /*normal*/
 background:...;
}
.button:hover{ /*over*/
 background:...;
}
.buttonOn{ /*aktiv*/
 background:...;
}
.buttonOn:hover{ /*aktivover*/
 background:...;
}
Code: 
<html>
<head>
<title>root/index.php</title>
</head>
<body>
<a href="index.php" class="<?php if($_SERVER['PHP_SELF'] == "index.php") echo "buttonOn"; else echo "button"; ?>">link</a>
<a href="hallo.php" class="<?php if($_SERVER['PHP_SELF'] ==  "hallo.php") echo "buttonOn"; else echo "button";  ?>">link</a>
<body>
</html>
Wenn PHP für dich okay ist versteht sich. $_SERVER['PHP_SELF'] gibt den aktuellen dateinamen an und die würd über die if-clause mit dem entsprechenden ausdruck abgeglichen und setzt auf den button die entsprechende classe.
Wie gesagt ich weiß jetzt nicht ob du das meinst, JS bin ich noch nicht so fit, glaube aber nicht, dass es da eine bessere Möglichkeit gibt.
 
Zuletzt bearbeitet:
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

ich habe das mal getestet, leider macht er das aktiv nicht,
Code: 
<html>
<head>
<title>index.php</title>
</head>
<style type="text/css">
.button{ /*normal*/
 background-image:url(gfx/news_normal.gif);
}
.button:hover{ /*over*/
 background-image:url(gfx/news_over.gif);
}
.buttonOn{ /*aktiv*/
 background-image:url(gfx/news_active.gif);
}
.buttonOn:hover{ /*aktivover*/
 background-image:url(gfx/news_hover.gif);
}
</style> 
<body>
<a href="index.php" class="<?php if($_SERVER['PHP_SELF'] == "index.php") echo "buttonOn"; else echo "button"; ?>">linksdfghjkol</a>
<a href="news.php" class="<?php if($_SERVER['PHP_SELF'] == "news.php") echo "buttonOn"; else echo "button";  ?>">linnghjfgjk</a>

</body>
</html>

habe auf beiden seiten index und news den code, aber egal was ich mach, er macht es irgendwie nicht, hast du noch nen lösungssatz zufällig für mich?
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

hast du deine nav in jeder deiner seiten, oder hast du sie mittels php ausgelagert?
 
X

XIIZQ

Noch nicht viel geschrieben

nein habe ich nicht, ich include die seiten einfach in eine tabelle, ist das auslagern?
bin grad nicht auf der höhe tut mir leid

ich habe kein nerv mehr, kann mir niemand helfen?
ich weiss echt nicht mehr weiter..
 
Zuletzt bearbeitet von einem Moderator:
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

da du deine nav ja includierst, wirst du wahrscheinlich irgendwo eine variable haben, in der steht, welche seite geladen wird. wenn du jetzt den Code von KaisyTom benützt und stat dem $_SERVER['PHP_SELF'] deine Variable einfügst und hinter dem == noch die werte die die Variable zu gegebener Zeit haben muss einfügst, bekommt der aktuelle navigationspunkt die buttonOn Klasse, der Rest die button Klasse.
Dann kannst du sie mit CSS, wie im Beispiel von Tom, formatieren.
Für konkreteres wäre Code z.b. mal gut :) z.b. deine navi.php und die, die diese einbindet.
 
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

HTML: 
<?
require('connect_db.php'); //Verbindung zur Datenbank wird aufgebaut
require('function/main.php'); //Die wichtigsten Funktion werden eingebunden
require('function/table.php');
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gg</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/viruz.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="gfx/favicon.ico" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<style type="text/css">
body
{
  background-image:url(gfx/bg.png);
  background-repeat: repeat-x;
  overflow-y: scroll; 
}
</style> 
</head>
<body bgcolor="#110e0c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table width="909" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="gfx/bgwindow.png">
    <img src="gfx/qb_hp_under_02.png" width="908" height="120" border="0"><br></a> 
    <img src="gfx/qb_hp_under_03.png" width="37" height="31"><a href="?m=news"
    
    onMouseOver="austausch1.src='gfx/news_hover.gif';"
    onMouseOut="austausch1.src='gfx/qb_hp_under_04.png';"><img src="gfx/qb_hp_under_04.png" border="0" width="113"height="31" name="austausch1"></a><a href="?m=team"
    
    onMouseOver="austausch2.src='gfx/qb_hp_under_05.gif';"
    onMouseOut="austausch2.src='gfx/qb_hp_under_05.png';"><img src="gfx/qb_hp_under_05.png" border="0" width="111"height="31" name="austausch2"></a><a href="?m=projects"
    
    onMouseOver="austausch3.src='gfx/qb_hp_under_06.gif';"
    onMouseOut="austausch3.src='gfx/qb_hp_under_06.png';"><img src="gfx/qb_hp_under_06.png" border="0" width="112"height="31" name="austausch3"></a><a href="?m=impressum"

    onMouseOver="austausch4.src='gfx/qb_hp_under_07.gif';"
    onMouseOut="austausch4.src='gfx/qb_hp_under_07.png';"><img src="gfx/qb_hp_under_07.png" border="0" width="112"height="31" name="austausch4"></a><img src="gfx/qb_hp_under_08.gif" width="423" height="31">
    <table width="880" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr valign="top">
            </td><td width="780">
           <br><br>
[PHP]<?
// $_GET in globale variable umwandeln
foreach($_GET as $key => $value) {
 $$key = $value;
}
// $_FILES in globale variable umwandeln
foreach($_FILES as $key => $value) {
 $$key = $value;
}
// $_POST in globale variable umwandeln
foreach($_POST as $key => $value) {
 $$key = $value;
}

if(isset($_GET['m']) && $_GET['m']!='') $m=$_GET['m'];
if(!isset($m)) $m="news"; //Startseite wird festgelegt

if($m=='login') include("function/login.php"); //Der Login
if($m=='logout') {include("function/logout.php"); $m='news';} // Logout
if($m=="fehler") { 
    echo"$f";
     if($incen=="true") include('registrieren.php');
    } // fehlerseite
else {
    $m = basename($m, ".php");;
    $m.=".php";
    if(file_exists($m)) include("$m");
        else include("404.php"); 
    } //else m!=fehler
    ?>[/PHP]
          </td>
          <td width="270">
           <br><br>
            <? include("picture.php");?>

            <? include("sidebar.php");?> 
            </td>
        </tr>
  </tr>
  </table>
    <tr>
        <td> 
        <img src="gfx/qb_hp_under_23.png" width="661" height="55"><img src="gfx/qb_hp_under_25.png" width="226" height="55"><img src="gfx/qb_hp_under_24.png" width="21" height="55">
        </td>
    </tr>
</table>
<p align="center">
</p>
</body>
</div>
</html>
das ist die index seite, kannst was mit anfangen und mir evtl. den code gleich rdy geben? wäre super dann weiss ich gleich wies geht, bin eben bastler kein coder ^^°
sry für die mühe, ich weiss das so schnorrer wie ich nicht grad beliebt sind =/

mfg
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

fertig gibts hier nichts. du sollst schließlich lernen und nicht stupide zusammenbasteln.

Augenscheinlich gibt die Variable $m doch an welche seite du laden willst.

PHP: 
if(isset($_GET['m']) && $_GET['m']!='') $m=$_GET['m'];
if(!isset($m)) $m="news"; //Startseite wird festgelegt
Pack diese zwei if klauseln, die nach den foreach schleifen stehen, nach oben in den ersten php block, wo das ganze require zeug steht.
dann löschst du dieses ganze onmouseover und onmouseout aus deiner navi.
und jetzt kannst du mit dem code von KaisyTom arbeiten.
z.b.
PHP: 
<a href="?m=news" class="<?php if($m == "news") echo "buttonOn"; else echo "button"; ?>"><img src="gfx/qb_hp_under_04.png" border="0" width="113" height="31"></a>

dann bekommt die seite, auf die du geklickt hast, die klasse buttonOn und der rest einfach nur button.

EDIT: wenns wieder nicht geht, poste auch deinen modifizierten code.
 
Zuletzt bearbeitet:
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

also ich hab das mal so gemacht wie du gesagt hast, leider
bekomme ich das nicht hin das er es ändert..

HTML: 
<style type="text/css">
body
{
  background-image:url(gfx/bg.png);
  background-repeat: repeat-x;
  overflow-y: scroll; 
}
.button{ /*normal*/
 background-image:url(gfx/qb_hp_under_02.png);
}
.button:hover{ /*over*/
 background-image:url(gfx/qb_hp_under_03.png);
}
.buttonOn{ /*aktiv*/
 background-image:url(gfx/qb_hp_under_05.png);
}
.buttonOn:hover{ /*aktivover*/
 background-image:url(gfx/qb_hp_under_06.png);
}
</style>

ist das style so richtig? weil css und bilder ist so eine sache ^^°
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

sollte so einigermaßen funktionieren. poste doch mal den neuen code. vlt habe ich auch etwas falsch erklärt.
 
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

HTML: 
<?
require('connect_db.php'); //Verbindung zur Datenbank wird aufgebaut
require('function/main.php'); //Die wichtigsten Funktion werden eingebunden
require('function/table.php');

if(isset($_GET['m']) && $_GET['m']!='') $m=$_GET['m'];
if(!isset($m)) $m="news"; //Startseite wird festgelegt
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>gg</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/viruz.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="gfx/favicon.ico" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<style type="text/css">
body
{
  background-image:url(gfx/bg.png);
  background-repeat: repeat-x;
  overflow-y: scroll; 
}
.button{ /*normal*/
 background-image:url(gfx/news_normal.gif);
}
.button:hover{ /*over*/
 background-image:url(gfx/news_hover.gif);
}
.buttonOn{ /*aktiv*/
 background-image:url(gfx/news_active.gif);
}
.buttonOn:hover{ /*aktivover*/
 background-image:url(gfx/news_over.gif);
}
</style> 
</head>
<body bgcolor="#110e0c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table width="909" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="gfx/bgwindow.png">
    <img src="gfx/qb_hp_under_02.png" width="908" height="120" border="0"><br></a> 
    <img src="gfx/qb_hp_under_03.png" width="37" height="31"><a href="?m=news" class="<?php if($m == "news") echo "buttonOn"; else echo "button"; ?>"><img src="gfx/qb_hp_under_04.png" border="0" width="113" height="31"></a><img src="gfx/qb_hp_under_08.gif" width="423" height="31">
    <table width="880" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr valign="top">
            </td><td width="780">
           <br><br>
<?
// $_GET in globale variable umwandeln
foreach($_GET as $key => $value) {
 $$key = $value;
}
// $_FILES in globale variable umwandeln
foreach($_FILES as $key => $value) {
 $$key = $value;
}
// $_POST in globale variable umwandeln
foreach($_POST as $key => $value) {
 $$key = $value;
}



if($m=='login') include("function/login.php"); //Der Login
if($m=='logout') {include("function/logout.php"); $m='news';} // Logout
if($m=="fehler") { 
    echo"$f";
     if($incen=="true") include('registrieren.php');
    } // fehlerseite
else {
    $m = basename($m, ".php");;
    $m.=".php";
    if(file_exists($m)) include("$m");
        else include("404.php"); 
    } //else m!=fehler
    ?>
          </td>
          <td width="270">
           <br><br>
            <? include("picture.php");?>

            <? include("sidebar.php");?> 
            </td>
        </tr>
  </tr>
  </table>
    <tr>
        <td> 
        <img src="gfx/qb_hp_under_23.png" width="661" height="55"><img src="gfx/qb_hp_under_25.png" width="226" height="55"><img src="gfx/qb_hp_under_24.png" width="21" height="55">
        </td>
    </tr>
</table>
<p align="center">
</p>
</body>
</div>
</html>
sieht zurzeit so aus,
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

du hast das doch auch alles online oder? wenn ja, poste bitte den link.
ansonsten poste bitte den generierten quellcode. allerdings ist nur der abschnitt mit der navi interessant. weil hier kann ich aktuell keinen fehler entdecken.
 
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

also ich habe nichts online,
möchte erst die page rdy haben, dann stell ich es online =/
wie die navi?

PHP: 
<a href="?m=news" class="<?php if($m == "news") echo "buttonOn"; else echo "button"; ?>"><img src="gfx/qb_hp_under_04.png" border="0" width="113" height="31"></a>
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

nein ich mein diese zeile wenn sie ausgegeben wird. ;)
du startest deinen browser gehst auf localhost und gibst mir dann den quelltext der im browser steht (bei FF strg+u)
 
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

HTML: 
<script src="js/kommentar.js"  type="text/javascript" language="JavaScript"></script><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>qq</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="css/viruz.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<link rel="shortcut icon" href="gfx/favicon.ico" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<style type="text/css">
body
{
  background-image:url(gfx/bg.png);
  background-repeat: repeat-x;
  overflow-y: scroll; 
}
.button{ /*normal*/
 background-image:url(gfx/news_normal.gif);
}
.button:hover{ /*over*/
 background-image:url(gfx/news_hover.gif);
}
.buttonOn{ /*aktiv*/
 background-image:url(gfx/news_active.gif);
}
.buttonOn:hover{ /*aktivover*/
 background-image:url(gfx/news_over.gif);
}
</style> 
</head>
<body bgcolor="#110e0c" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<br>
<table width="909" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td background="gfx/bgwindow.png">
    <img src="gfx/qb_hp_under_02.png" width="908" height="120" border="0"><br></a> 
    <img src="gfx/qb_hp_under_03.png" width="37" height="31"><a href="?m=news" class="buttonOn"><img src="gfx/qb_hp_under_04.png" border="0" width="113" height="31"></a><img src="gfx/qb_hp_under_08.gif" width="423" height="31">
    <table width="880" border="0" cellspacing="0" cellpadding="0" align="center">
        <tr valign="top">

            </td><td width="780">
           <br><br>
 <table width=624 border=0 cellspacing=0 cellpadding=0 class=pad><tr> 
                  <td width=624 height=21 background=gfx/qb_hp_under_14.png class=nav-t1><strong>gg!</strong><small></small></td>
                  </tr><tr> 
                  <td bgcolor=#000000><table width=100% border=0 cellspacing=0 cellpadding=5>
                  <tr> <td class=nav-t>Moinsen,<br />
</td>
                  </tr></table></td></tr><tr> 
                  <td height=10 background=gfx/qb_hp_under_21.gif class=nav-t1>11.04.2010 - 18:25 Uhr</td>
                  </tr></table><body id="home">          </td>
          <td width="270">
           <br><br>
                <table width=226 border=0 cellspacing=0 cellpadding=0>
  <tr> 
    <td width=226 height=32 background=gfx/qb_hp_under_15.png class=nav-t1><strong>Map Pictures</strong></td>
  </tr>
  <tr> 
    <td width=226 background=gfx/qb_hp_under_18.png><table width=100% border=0 cellspacing=0 cellpadding=5>
        <tr> 
          <td class=nav-t>
<!-- BEGINNING OF THE CODE FOR THE CSS-3-SLIDESHOW-->

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STARTS HERE -->
<!----------------------------------------->
<!-- Set the text-style within ".textboxstyle" -->
<!-- Set the backgroundcolor, the rounded corners and the shadow within ".textboxbackgroundstyle" -->
<!-- Set the rounded corners and the shadow within ".curveandshadowstyle" -->
<style>    
.textboxstyle {
text-align:left;
color:black;
vertical-align:bottom
}

.textboxbackgroundstyle {
background-color:white;
padding-right:15px;
padding-left:10px;
margin-left:-4px;

/* rounded corners for Firefox */
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 15px;

/* rounded corners for for Safari and Chrome */
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-right-radius: 15px;

/* rounded corners for Opera */
border-top-left-radius: 0px;
border-bottom-right-radius: 15px;
}

.curveandshadowstyle {

/* shadow and rounded corners for Firefox */
-moz-box-shadow: 5px 5px 8px #000000;
-moz-border-radius-topleft: 25px;
-moz-border-radius-bottomright: 25px;

/* shadow and rounded corners for Safari and Chrome */
-webkit-box-shadow: 5px 5px 8px #000000;
-webkit-border-top-left-radius: 25px;
-webkit-border-bottom-right-radius: 25px;

/* shadow and rounded corners for Opera */
box-shadow: 5px 5px 5px #000000;
border-top-left-radius: 25px;
border-bottom-right-radius: 25px;

/* shadow for Internet Explorer */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#000000');

border-style:none;
border-width:0px;
border-color:black;
}
</style>

<!----------------------------------------->
<!-- STYLE-CONFIGURATION STOPS HERE -->
<!----------------------------------------->
    
<script>
var imgurl= new Array()
var message= new Array()
var thislink= new Array()

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STARTS HERE
/////////////////////////////////////////////////
</script>
<script> imgurl[0]="bilder/mappics/27673729.jpg"
imgurl[1]="bilder/mappics/27673729.jpg"

message[0]="Map 01"
message[1]="Map 02"

thislink[0]=""
thislink[1]="" </script><script>
// width of pictures (pixel)
var imgwidth=210

// width of pictures (pixel)
var imgheight=150

// set stillstand of picture (seconds)
var stillstand=2.5

// set opacity-strength (transparency-effect). Values may range from 1 to 100
var opacitystrength=50

/////////////////////////////////////////////////
// SCRIPT-CONFIGURATION STOPS HERE
/////////////////////////////////////////////////


// Do not edit below this line
var tmr
var step=10
var i=imgwidth
var i_imgurl=0
stillstand*=1000

var preloadedimages=new Array()
for (iii=0;iii<imgurl.length;iii++){
    preloadedimages[iii]=new Image()
    preloadedimages[iii].src=imgurl[iii]
}

function ******pic() {
    document.getElementById("textbox").innerHTML=""
    if (i>0) {
        i-=step
        document.getElementById("picdiv").style.width=i
        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)
        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)
        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)
        tmr=setTimeout("******pic()",20)
    }
    else {
        i_imgurl++
        if (i_imgurl>=imgurl.length) {
            i_imgurl=0
        }
        document.getElementById("picdiv").style.background="url("+imgurl[i_imgurl]+")"
        i=1
        tmr=setTimeout("enlargepic()",20)
    }
}

function enlargepic() {
    if (i<=imgwidth) {
        i+=step
        document.getElementById("picdiv").style.width=i
        document.getElementById("picdiv").style.height=i*(imgheight/imgwidth)
        document.getElementById("picdiv").style.left=imgwidth/2-(i/2)
        document.getElementById("picdiv").style.top=(imgwidth/2-(i/2))*(imgheight/imgwidth)
        tmr=setTimeout("enlargepic()",20)
    }
    else {
        i=imgwidth
        showmessage()
    }
}

function showmessage() {
    document.getElementById("textbox") .innerHTML='<span class="textboxbackgroundstyle">'+message[i_imgurl]+'</span>'
    tmr=setTimeout("******pic()",stillstand)
}

function gotothislink(){
    document.location.href=thislink[i_imgurl]

}
</script>
<script>
document.write('<div id="roof" style="position:relative;width:'+imgwidth+'px;height:'+imgheight+'px;">')
document.write('<div id="picdiv" class="curveandshadowstyle" style="position:absolute;background:url('+imgurl[0]+');width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;"></div>')

document.write('<div id="tt" onClick="gotothislink()" style="position:absolute;width:'+imgwidth+'px;height:'+imgheight+'px;top:0px;left:0px;filter:alpha(opacity='+opacitystrength+');opacity:'+(opacitystrength/100)+';cursor:pointer;"><table width='+imgwidth+' height='+imgheight+'><tr><td id="textbox" class="textboxstyle"><span class="textboxbackgroundstyle">'+message[0]+'</span></td></tr></table></div>')

document.write('</div>')

window.onload=******pic
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript" src="fadeslideshow.js">

/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
</td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><img src=gfx/qb_hp_under_19.png width=226 height=23></td>
  </tr>
</table>
</br>

            <table width=226 border=0 cellspacing=0 cellpadding=0>
  <tr> 
    <td width=226 height=32 background=gfx/qb_hp_under_15.png class=nav-t1><strong>Newsarchiv</strong></td>
  </tr>
  <tr> 
    <td width=226 background=gfx/qb_hp_under_18.png><table width=100% border=0 cellspacing=0 cellpadding=5>
        <tr> 
          <td class=nav-t><a href=?m=news&action=viewmonth&monat=4&jahr=2010>April 2010 (1)</a></td>
        </tr>
      </table></td>
  </tr>
  <tr> 
    <td><img src=gfx/qb_hp_under_19.png width=226 height=23></td>
  </tr>
</table><br> 
            </td>
        </tr>
  </tr>
  </table>
    <tr>

        <td> 
        <img src="gfx/qb_hp_under_23.png" width="661" height="55"><img src="gfx/qb_hp_under_25.png" width="226" height="55"><img src="gfx/qb_hp_under_24.png" width="21" height="55">
        </td>
    </tr>
</table>
</body>
</div>
</html>
 
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

generell zu deinem Quelltext:
du bist bastler, und das ist ok, aber z.b. könnten durchaus probleme auftauchen, wenn du den script tag oben nicht in den head tag schiebst.
<img src="gfx/qb_hp_under_02.png" width="908" height="120" border="0"><br></a>
hier ist der schließende a tag zuviel. kA ob es daran liegt.
außerdem sollten, glaube sogar müssen, generell alle attribute in anführungszeichen stehen.

btt:
das sieht für mich eigentlich alles so aus wie gewollt. wenn qb_hp_under_04.png nicht transparent ist wirst du von den anderen bildern auch nichts sehen, da diese, wie man dem css entnehmen kann, ja nur den hintergrund verändern. außerdem kann es sein, dass die adressierung nicht stimmt.

mach das bild (qb_hp_under_04.png) aus dem a tag raus und füge folgendes in deinem css hinzu:
HTML: 
.button, .buttonOn {min-width: 30px; min-height: 30px;}
außerdem würde ich die ganzen background-images mal testweise mit background-color ersetzen. und zwar verschiedenen. z.b.
HTML: 
.button {background-color: red;}
.button:hover {background-color: blue;}
usw.
dann hast du nämlich auch falsche adressierungen ausgeschlossen, bzw. kannst dich dann darum kümmern, wenn du weißt dass es daran liegt.
 
X

XIIZQ

Noch nicht viel geschrieben

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

ahh erfolge..
nun ist es so, das bild ist raus und der background soll das machen was er machen soll, blos jetzt ist der fall das die grafik aus der css zu niedrig ist und eine als fehlende grafik da steht und das sieht doof aus anbei isn screen

edit: hab mal nen transeffekt genommen, sieht immer noch so aus, aber ohne den grafik nicht gefunden fehler
 
Zuletzt bearbeitet:
S

SineTempore

Nicht mehr ganz neu hier

AW: [Brauche hilfe] Navigationsbutton mit 4 Bildern

die breite und höhe angaben von mir musst du natürlich auf deine hintergrundgrafiken anpassen. da der browser bei background-image keine rücksicht auf die größe der grafik nimmt.
dass dieses fehlerbild kommt, kommt wahrschenlich daher, dass du immer noch den img tag im code hast oder? Ansonsten kA :p
es wär übrigens sooo viel einfach wenn du das einfach hochladen würdest. du musst es ja nicht ins root verzeichnis packen. aber einfach sone art verstecktes verzeichnis. z.b. www.deine-domain.de/psdversteck
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 240 (Mitglieder: 6, Gäste: 234)
Robots: 1.039

Statistik des Forums

Themen
118.611
Beiträge
1.538.342
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben