• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Bei Linkhover Infos in einem anderem Bereich anzeigen

W

Wombi Wompatz

Neues Mitglied
HTML: 
<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
    Büro
    </title>
    <link rel="stylesheet" href="root.css" />  
</head>

<body>


<div id=logo>
    </br>
    <a class="head2" href="Logo.htm"><u>Büro</u></br>Name</a>
</div>      

<div id=Kopfzeile>
    <p>
        </br>
        <a class="head1" href="veröffentlichungen.htm">VERÖFFENTLICHT</a></br>
        <a class="head1" href="projekte.htm">PROJEKTE</a></br>
        <a class="head1" href="Büro.htm">BÜRO</a></br>
        <a class="head1" href="Impressum.htm">KONTAKT</a>
    </p>
</div>

<div id=Seitenzeile>
        <pre class="head3">
        <p<img title="Bild1"><div>hier stehen alle Infos</div></p>
      
        </pre>
      
</div>      



<div id=Körper>
    <!--<a href="Bild2"><img src="Testbilder/Blume.jpg"/></a>-->
    <!--<a href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'" /></a-->
    <!--img title="Bild1" src="Testbilder/Blume3.jpg" ><div>hier stehen alle Infos</div></a-->
  
  
  
    <a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
    <a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
    <a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
  
  
  

  
  
  
  
  

  
  

  
  
</div>



  
  
   

   
</body>
</html>



CSS:
body {
    background-color: white;
    }


.head1{
    color: B1AAAA;
    font-size: 10pt;
    font-family:  Century Gothic;
    text-decoration:    none;
  
  
    }
  
.head2{
    color: black;
    font-size: 10pt;
    font-family:      Century Gothic;
    }
  
.head3{
    color: black;
    font-size: 10pt;
    font-family:  Century Gothic;
    }  
  
  
a:hover{
    color:    black;
}  


a.Bild1:link, a.Bild1:visited {
font-family:Century Gothic;
font-size: 10px;
color:transparent;
text-decoration:    none;
}

a.Bild1:hover {
color:black;
text-decoration:    none;

}



#logo{
    background-color: green;
    opacity: 3;
    height: 120px;
    width: 200px;
    float: left;
}

#Kopfzeile{
    background-color: red;
    opacity: 3;
    height: 120px;
}

#Seitenzeile{
    background-color: yellow;
    opacity: 3;
    width: 200px;
    height: 1000px;
    float: left;
}

#Körper {
    background-color: none;
    margin-left: 200px;
    margin-right: 140px;
}
Hallo liebe Leute,

ich versucht gerade über HTML und CSS eine Homepage für unser Büro zu erstellen:

Dabei hänge ich gerade an folgendem Problem und hoffe ihr könnt mir weiterhelfen:

und zwar habe ich meine Webseite in 4 Bereiche eingeteilt (siehe Bild).
Und zwar im 4 Bereich (#Körper) kommt eine Zusammenfassung von Projekten.
Jetz habe ich es schon hingebekommen das wenn ich über das Bild fahre, es ein anderes Bild ( Photoshop nur leicht die Transparenz geändert) anzeigt.

Ich möchte aber gerne das ich, wenn über die jeweiligen Projekte fahre (hovere^^) im Bereich "Seitenzeile" Infos über das Projekt angezeigt werden.

Wie mache ich das am einfachsten?

Vielen lieben Dank schonmal im voraus für folgende Antworten

PS:
Unten sind Meine HTML und CSS Datei zu finden
 

Anhänge

  • Testseite.txt
    Testseite.txt
    2,5 KB · Aufrufe: 6
  • Unbenannt.png
    Unbenannt.png
    111,7 KB · Aufrufe: 10
Zuletzt bearbeitet:
Wombi Wompatz schrieb:
geht das ganze auch ohne JavaScript?
Zum Vergrößern anklicken....

Du könntest ebenso fragen, ob sich ob sich dein Code ohne HTML abbilden lässt. Prinzipiell schon, sofern man eine Template Engine einsetzt, die HTML generieren kann. Aber wozu?

JavaScript ist das Tool zu clientseitiger DOM Manipulation. Also entweder lernen, oder die Aufgabe an jemanden übertragen, der sich damit auskennt. Zumal das wirklich eine Anfängeraufgabe ist, die sich mit drei Zeilen bewerkstelligen lässt.
 
Hallo,

so wie ich das verstehe geht es auch mit CSS und hover.

Wenn ich allerdings lese

Homepage für unser Büro
Zum Vergrößern anklicken....

kann ich von solchen hover-Effekten (egal ob mit CSS oder JS) nur abraten.

Problem: Wie ich grade kürzlich gelesen habe sind inzwischen über 80% der Internetuser mit Touchscreens (Smartphones, Tablets, 2in1 und ähnlichem) unterwegs. Die können schlicht mit hover-Effekten nichts, aber auch gar nichts, anfangen.

Das zeigt auch der Verkaufsanteil von Desktop-PCs. Der ist im Keller. Und zwar voraussichtlich dauerhaft. In 6 bis 12 Monaten werden über 90% der Internetuser mit Touchscreen-Geräten unterwegs sein.

Wer davor die Augen verschließt hat zumindest in dieser Hinsicht den Blick auf die Realität verloren.

Deshalb sollten hover-Effekte nur dort eingesetzt werden, wo die Seite auch ohne sie funktioniert. In deinem Fall würden (so habe ich es jedenfalls verstanden) über 80% der Besuchern deines Büros Informationen vorenthalten werden.

Außerdem finden die meisten User solche Effekte meist nervig. Sie kosten Zeit und behindern die Zugang zu den Informationen der Seite.

Steck' die eingesparte Zeit lieber in ein vernünftiges Responsive Design.

Gruss

MrMurphy
 
Vielen Dank schonmal für die Antworten...

auf Tooltip bin ich auch schon gestroßen .. bin aber da nicht ganz schlau geworden, denn ich habe da nicht genau verstanden, wie man das genau auf meinem Seitenberreich bekommt..aber ich werde mich die Tage damit noch genauer außeinandersetzen.

zu Murphy....
Vielen Dank schonmal...
und ich kann deine Argumentation mit dem Tablet PCs auch gut nachvollziehen.
Aber ich stelle mir das ganze so vor, dass die Bilder die Übersicht der Projekte geben.. und man wenn man hovert die Infos dazu am Rand angezeigt bekommt.
Wenn man sich dann für das Projekt interessiert, dann klickt man drauf und dann werden die Infos am Rand auch dauerhaft angezeigt.
(wird eine Architekturhomepage, da sollen die Bilder der Eyecatcher sein)
Das mit dem Hovern kann auch nur ein schöner Nebenefekt sein, wenn man das ganze am PC anschaut.


Und die Seite eilt nicht, ich nutze die freie Zeit mich hier selbst in HTML und CSS ein wenig beizubringen und bin hier auch um jede Unterstützung und um jedes kleine positive Ergebniss froh.(schadet nie wenn man sich da ein wenig auskennt)

Ich versuche hald "Do It Yourself" mit Büchern und Internet die eine sehr einfache und gut Verständliche Seite aufzubaun und dabei mit dem geringsten Aufwand eine gute Seite zu erstellen.

Wenn jemand eine gute Anleitung für Java hat damit ich mich da hineinlesen kann wäre super...

Und schönmal vielen Dank für die ganzen Antworten.. ging ja echt recht fix.
 
Ich hänge hier iwie immer noch ..
Habe das ganze jetzt so umgeschrieben. dass in meinen CSS dokumenten das ganze so aussieht:

CSS:

a.Bild1:link span{ position: absolute;
font-family:Century Gothic;
font-size: 10px;
color:transparent;
cursor: default;
pointer-events: none;
}

a.Bild1:hover span{ position: absolute;
font-family:Century Gothic;
font-size: 10px;
color:black;
}

HTML

<a class="Bild1" href="Eins"><span>Hier stehen die Infos zum Bild:</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier</span><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>


Mit dem Position Absolute bewirke ich ja nur, das die schrift in abhängigkeit zum bild angezeigt wird..
ich hätte die schrift aber immer in meinem gelben kästchen angezeigt.

und wenn ich Position relative eingebe ändert es immer mein bild mit und es ist nicht mehr so schön geordnet wie in meinem Screenshot.
1.jpg



Also falls oben nicht verständlich.. wenn ich mit der Maus hovere sieht das ganze so aus ...Die schrift die aber mit "Position absolut " jetz an die das bild verknüpft ist soll in das gelbe Feld ( da wo so schön mit Paint das T hingemalt ist ;-)

wie fixe ich die schrift also in mein gelbes kästchen? (dieser berreich heißt im HTML auch "Seitenzeile"...

Nur die Schrift soll dahin das bild soll dort bleiben..


Puhh schwierig das hier zu erklären..aber vllt ist ja so ein Genie von euch hier unterweg, kapiert was ich da versuch wirres zu fragen und kann mir helfen..

Wäre super....

vielen vielen Dank schonmal... auch wenn keine Lösung weist.. hast du es dir zumindest durchgelesen...:) danke dafür^^



Ganz unten noch mein gesamtes HTML und CSS Dokument ....

HTML: 
HMTL:

<!doctype html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
    Büro
    </title>
    <link rel="stylesheet" href="root.css" />   
</head>

<body>


<div id=logo>
    </br>
    <a class="head2" href="Logo.htm"><u>Büro</u></br>Name</a>
</div>   




<div id=Kopfzeile>
    <pre>
</br></br>

<a class="head1" href="veröffentlichungen.html">VERÖFFENTLICHT</a>        <a class="head1" href="projekte.html">PROJEKTE</a>        <a class="head1" href="büro.html">BÜRO</a>        <a class="head1" href="kontakt.html">KONTAKT</a>

   
   
   
   
   
   
</div>

<div id=Seitenzeile>

<pre class="head3">
</pre>
       
</div>       



<div id=Körper>
    <!--<a href="Bild2"><img src="Testbilder/Blume.jpg"/></a>-->
    <!--<a href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'" /></a-->
    <!--img title="Bild1" src="Testbilder/Blume3.jpg" ><div>hier stehen alle Infos</div></a-->
    <!--a class="Bild1" href="Bild1"><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a-->

   
    <a class="Bild1" href="Eins"><span>Hier stehen die Infos zum Bild:</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier
    </span><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
   
    <a class="Bild1" href="Eins"><span>Hier stehen die Infos zum Bild:</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier</br>Eigentlich alles was man so wissen muss steht hier
    </span><img src="Testbilder/Blume3.jpg" alt="" onmouseover="src='Testbilder/Blume.jpg'" onmouseout="src='Testbilder/Blume3.jpg'"</a>
   
   
   
   
    </pre>

   
   
   
   
   

   
   

   
   
</div>



   
   
    

    
</body>
</html>





CSS:

body {
    background-color: white;
    }


.head1{
    color: black;
    font-size: 12pt;
    font-family:  Century Gothic;
    text-decoration:    none;
   
   
    }
   
.head2{
    color: black;
    font-size: 10pt;
    font-family:      Century Gothic;
    }
   
.head3{
    color: black;
    font-size: 8pt;
    font-family:  Century Gothic;
    width: 250px;
    height: 1000px;
    float: left;
    }   
   
   





a.Bild1:link span{    position: absolute;
                    font-family:Century Gothic;
                    font-size: 10px;
                    color:transparent;
                    cursor: default;
                    pointer-events: none;
                    }
                   
a.Bild1:hover span{    position: absolute;
                    font-family:Century Gothic;
                    font-size: 10px;
                    color:black;
                    }





#logo{
    background-color: none;
    opacity: 3;
    height: 120px;
    width: 250px;
    float: left;
}

#Kopfzeile{
    background-color: none;
    opacity: 3;
    height: 120px;
}

#Seitenzeile{
    background-color: yellow;
    opacity: 3;
    width: 250px;
    height: 1000px;
    float: left;
}

#Körper {
    background-color: none;
    margin-left: 250px;
    margin-right: 140px;
}

#Impres {
    background-color: none;
    margin-right: 140px;
    width: 280px;
}
 
Wombi Wompatz schrieb:
Puhh schwierig das hier zu erklären..aber vllt ist ja so ein Genie von euch hier unterweg, kapiert was ich da versuch wirres zu fragen und kann mir helfen..
Zum Vergrößern anklicken....

Das ist gut verständlich: Beim Hovern über Element A soll sich der Inhalt von Element B verändern. Also benötigt man ein Mouseover auf A, welches etwas mit B macht.

Ich schreibe dir den Code allerdings nicht, wenn du dadurch den Lernaufwand vermeiden willst. Hier
http://learn.jquery.com/

Grundlagen erwerben und eigenen Ansatz posten. Wenn es dann klemmt, helfe ich weiter.
 
Hier mal eine :target Variante
Code: 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>
  Büro
  </title>
  <style>
#wrapper {
background:#ddd;
overflow:hidden;
}

header {
padding:20px;
background:#ada;
}

#col1 {
width:25%;
float:left;
}

#col2 {
margin-left:25%;
background:#aaa;
}

#col2:after {
content:"";
display:block;
clear:left;
}


#col1 article , #col1 br {
display:none;
padding:10px;
}

#col1 br:target + article {
display:block;
}


#col2 img {
float:left;
width:25%;
}

footer {
padding:20px;
background:#ada;
clear:both;
}

</style>
</head>
<body>
<div id="wrapper">
<header><h1>Homepage</h1></header>

<div id="col1">
<br id="b1"><article><h2>Projektinfos 1</h2><p>Infotext</p><p>Infotext</p><p>Infotext</p><p>Infotext</p><p>Infotext</p></article>
<br id="b2"><article><h2>Projektinfos 2</h2></article>
<br id="b3"><article><h2>Projektinfos 3</h2></article>
<br id="b4"><article><h2>Projektinfos 4</h2></article>
</div>

<div id="col2">
<a href="#b1"><img src="bild1.jpg" alt=""></a>
<a href="#b2"><img src="ente.jpg"  alt=""></a>
<a href="#b3"><img src="loewe.jpg" alt=""></a>
<a href="#b4"><img src="eisbaer.jpg"  alt=""></a>
</div>

<footer><h4>Footer</h4></footer>
</div>

</body>
</html>

http://www.gipspferd.de/forumhilfe/link-target/test.htm
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben