Neuer Layer mit Links und Checkboxen

Status
Nicht offen für weitere Antworten.
M

mkoeni1

Erfahrenes Mitglied
Hallo Leute,

ich habe ein Problem und benötige Eure Hilfe.

Ich habe ein Bild (als Link) und versuche daran einen kleinen Layer (Div) dranzuklemmen, der mir Informationen zu diesem Bild liefert. Es sollen in diesem Layer auch anklickbare Links bereitstehen.

So sieht mein Quellcode bis jetzt aus:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Titel</title>

<script type=text/javascript>
function punkt1() {
 if(document.getElementById('layer').style.visibility=='hidden') {
  document.getElementById('layer').style.visibility='visible';
 }
    else{
        document.getElementById('layer').style.visibility='hidden';
}
}

</script>

<style type="text/css"><!--

#layer{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
}

//--></style>

</head>
<body>
 <!-- Inhalt der Datei -->
<a href=# onclick=punkt1()><img src="images/wolken.gif" height="" width="" alt="Wolken" border="0"></a> 
<div id="layer" style="visibility:hidden; "></div>  


</body>
</html>
Wie muss ich diese Div erweitern, dass darin zB. ein kleines Formular erscheint, bzw. Links und Checkboxen?

Die zweite Frage ist folgende: Wie bekomme ich das Quadrat nach onMouseOut wieder weg?


Vielen Dank und Gruß
Matze
 
Danke ;-)

Das rote Quadrat ist eigentlich ein graues Quadrat (siehe CSS).
Das bekomme ich mit diesem Attribut:
PHP: 
onmouseout="javascript:document.getElementById('layer').style.visibility='hidden'"

innerhalb des Elementes:
PHP: 
<div id="layer" style="visibility:hidden; " onmouseout="javascript:document.getElementById('layer').style.visibility='hidden'">
<!-- Inhalt des eingebetteten Divs -->
<a href="#"</div>
wieder weg!

Vielen Dank und Gruß
Matze
 
Warum so umständlich?

Du kannst doch ganz bequem die Funktion punkt1() aufrufen:

Code: 
<div id="layer" style="visibility:hidden;" onmouseout="punkt1()">...</div>
 
Hallo Maik,

den Lösungsvorschlag muss ich mir mal zu Gemüte führen. Danke.
Eine andere Frage habe ich noch. Wie kann ich erreichen, dass die Box immer unmittelbar neben dem Link edit aufgeht (ca. 5 px rechts und 5px nach unten) und nicht wie bei mir einfach willkürlich irgendo auf der Seite erscheint?

Das ist mein Link:
PHP: 
<a href=\"#\" onclick=\"editbox()\">edit</a>

Ich muss dazu sagen, dieser Link wird in einer Schleife mit ausgegeben.
PHP: 
// Tabelle Starten
echo "<table border=\"0\"><tr>" ;
while($row=mysql_fetch_object($result)){
...
echo "<td><div class=\"transON\" onmouseover=\"this.className='transOFF'\" onmouseout=\"this.className='transON'\"><img src=\"".$row->avatar."\" alt=\"Tuxi in Action\"><br><div class=\"untertest\">".$row->username."<br>".$cutmail."<br><b>".$cutpass."</b>...<br><a href=\"#\" onclick=\"editbox()\">edit</a></div></div></td>" ; 
...
} // ende while
echo "</table>" ;

// jetzt kommt der Layer der dann erscheint, wenn ich auf den Link -> editklicke.
echo "<div id=\"layer\" style=\"visibility:hidden;\" onmouseout=\"editbox()\">link</div>";

Das css und javascript sieht folgender masen aus:
PHP: 
<script type=text/javascript>
function editbox() {
 if(document.getElementById('layer').style.visibility=='hidden') {
  document.getElementById('layer').style.visibility='visible';
 }
    else{
        document.getElementById('layer').style.visibility='hidden';
}
}
</script>

<style type="text/css">
<!--
div.transON{
    background-color: yellow;
    height: 200px;
    width: 155px;
    margin:5px 5px 5px 5px;
    padding: 4px 4px 4px 4px;
    border: 1px solid grey;
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;
    background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;
}

div.untertest{
    text-align: left;
    border-top: 1px solid black;
    padding: 4px 4px 2px 4px;
    margin-top: 5px;
}

div.transOFF {
    width: 155px; 
    background-color: yellow; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px; 
}
div.trans25 {
    width: 155px; 
    background-color: yellow; 
    opacity:.25;
    filter: alpha(opacity=25); 
    -moz-opacity: 0.25; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;}
div.trans75 {
    width: 155px; 
    background-color: yellow; 
    opacity:.75;
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;}

div.edit{
    text-align: right;
    border: 1px solid grey;
}

#layer{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
}

//-->
</style>

hier setze ich nochmal den ganzen Quell-Code hin:
PHP: 
<?php
// Oeffne Datenbank
include('sites/dbconnect.php');

?>
<html><head><title>Objekte mit CSS listen</title>

<script type=text/javascript>
function editbox() {
 if(document.getElementById('layer').style.visibility=='hidden') {
  document.getElementById('layer').style.visibility='visible';
 }
    else{
        document.getElementById('layer').style.visibility='hidden';
}
}
</script>

<style type="text/css">
<!--
div.transON{
    background-color: yellow;
    height: 200px;
    width: 155px;
    margin:5px 5px 5px 5px;
    padding: 4px 4px 4px 4px;
    border: 1px solid grey;
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;
    background-color: silver;opacity:.50;filter: alpha(opacity=50); -moz-opacity: 0.5;
}

div.untertest{
    text-align: left;
    border-top: 1px solid black;
    padding: 4px 4px 2px 4px;
    margin-top: 5px;
}

div.transOFF {
    width: 155px; 
    background-color: yellow; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px; 
}
div.trans25 {
    width: 155px; 
    background-color: yellow; 
    opacity:.25;
    filter: alpha(opacity=25); 
    -moz-opacity: 0.25; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;}
div.trans75 {
    width: 155px; 
    background-color: yellow; 
    opacity:.75;
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    border: 1px solid grey; 
    height: 200px; 
    margin:5px 5px 5px 5px;
    padding: 4px 4px 2px 4px; 
    text-align: center;
    font-family: Verdana; 
    font-size: 11px;}

div.edit{
    text-align: right;
    border: 1px solid grey;
}

#layer{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
}

//-->
</style>

<title>Alles zu Formularen</title>
</head><body>

<?php
//  Gesamter Inhalt der Seite DIV wird mit Hilfe von CSS ausgerichtet 
echo '<div style="width:500px;height: 600px; margin:0px auto;  border:dashed 1px lightgrey; text-align: center;">';

for($i = 1; $i < 12; $i++){
    echo '<div id="test">';
    echo 'Objekt '.$i.'<br>';
    echo 'Beschreibung<br>';
    echo 'Attribute<br>';
    echo '</div>';
}


echo '</div>';







echo '<br><br><br>';
// 3 Testformular fuer die Anzahl an Elementen auf der Seite
echo '<h2>Laden der Seite neu nach Drop-Down Auswahl    </h2>'; 
?>
<form name="Anzeigen" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
  <select onchange="document.Anzeigen.submit();" name="select">
    <option value="6" <?php if($_POST['select'] ==  '6'){ ?> selected <?php } ?>>6</option>
        <option value="9" <?php if($_POST['select'] ==  '9'){ ?> selected <?php } ?>>9</option>
        <option value="12" <?php if($_POST['select'] ==  '12'){ ?> selected <?php } ?>>12</option>
  </select>
</form>

<?php
// ausgewahlten Wert zuweisen
if( isset($_POST['select']) ){
    $anzahl = $_POST['select'];
    $sql = "SELECT * FROM user LIMIT ".$anzahl."";
} else{
    $sql = "SELECT * FROM user LIMIT 6";
}
//    echo $sql;
$result = mysql_query($sql);


// Zähler Starten
$zahl = "0"; 
// Tabelle Starten
echo "<table border=\"0\"><tr>" ;
// My SQL Abfrage
while($row=mysql_fetch_object($result)){
    $cutpass = substr($row->password, 0, 18);
    $cutmail = substr($row->email, 0, 18);
    echo "<td><div class=\"transON\" onmouseover=\"this.className='transOFF'\" onmouseout=\"this.className='transON'\"><img src=\"".$row->avatar."\" alt=\"Tuxi in Action\"><br><div class=\"untertest\">".$row->username."<br>".$cutmail."<br><b>".$cutpass."</b>...<br><a href=\"#\" onclick=\"editbox()\">edit</a></div></div></td>" ; 

// Wenn Zahl == 1 dann wird eine neue Zeile angefangen
    if($zahl == "3    ")
        {
            echo "</tr><tr>" ; 
            $zahl = "-1" ; 
        }
    $zahl++;
}
echo "</table>" ;

echo "<div id=\"layer\" style=\"visibility:hidden;\" onmouseout=\"editbox()\">link</div>";

?>


</body>
</html>


Die Frage die sich mir stellt, kann ich ( durch die Ausgabe der Schleife ) den Layer den ich öffne wenn ich auf den Link ->edit<- klicke immer unmittelbar (5px rechts/5px unterhalb) neben dem Link anzeigen lassen?


Vielen Dank und Gruß
Matze
 
Zuletzt bearbeitet:
Hi,

am Einfachsten ginge es, wenn das DIV #layer im Quellcode unmittelbar nach dem Link notiert wird, und dieser mit float:left von der Box auf der rechten Seite umflossen wird:

Code: 
<a href="#" onclick="editbox();return false;" style="float:left;">edit</a>
<div id="layer" style="visibility:hidden;" onmouseout="editbox()">link</div>
Für das DIV wird mit der margin-Eigenschaft der gewünschte Außenabstand festgelegt:

Code: 
#layer{
    height: 100px;
    width: 100px;
    border: 1px solid grey;
    background-color: lightgrey;
    margin:5px 0 0 30px; /* Außenabstand oben-rechts-unten-links */
}
 
Hi,

Cool Danke das funktioniert so weit, das Problem ist jetzt nur dieses, dass der Layer immer an der ersten Box (egal welchen Link edit ich klicke). Wie kann ich es erreichen, dass die Box "mitwandert" sprich: Wenn ich in der Schleife bei $i = 3 bin müsste der Layer am dritten, sogenannten "Objekt" erscheinen. Wenn 5 dementsprechend am 5ten, usw.

PS: Mit dem z-index muss ich noch etwas spielen um die opacity deutlicher optisch zu trennen.


Vielen Danku und Gruß
Matze
 
Das wird dann daran liegen, dass nun alle Boxen mit derselben ID #layer ausgegeben werden, was aber so nicht zulässig ist, und daher zu diesem Verhalten führt.
 
Soweit bin ich jetzt auch ;-)
Klar, es ist nirgends definiert, hör zu du bist layer 1. layer 2 und so weiter.

Dazu müsste ich eine kleine Javascript Funktion schreiben, die das so regelt, oder?

Vielen Dank und Gruß
Matze
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück