Bei Linkhover Infos in einem anderem Bereich anzeigen

html.de-Forum HTML, XHTML & CSS
1

[HTML]

Büro

Büro
Name


VERÖFFENTLICHT
PROJEKTE
BÜRO
KONTAKT 

        <p
hier stehen alle Infos


    </pre>



<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>

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;
}

[/HTML]
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

2

Mit JavaScript.

3

geht das ganze auch ohne JavaScript?

4

Ich denke, du meinst einen Tooltip? Google mal danach und sag bescheid, ob es das richtige ist. Gibt es auch ohne JS, nur mit CSS.

5

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.

6

Hallo,

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

Wenn ich allerdings lese

Homepage für unser Büro

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

7

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.

8

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

Hier stehen die Infos zum Bild:
Eigentlich alles was man so wissen muss steht hier
Eigentlich alles was man so wissen muss steht hier
Eigentlich alles was man so wissen muss steht hier<img src=„Testbilder/Blume3.jpg“ alt=„“ onmouseover=„src=‚Testbilder/Blume.jpg‘“ onmouseout=„src=‚Testbilder/Blume3.jpg‘“

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.
[ATTACH=full]4218[/ATTACH]

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 :wink:

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…:slight_smile: danke dafür^^

Ganz unten noch mein gesamtes HTML und CSS Dokument …

[HTML]HMTL:

Büro

Büro
Name 




VERÖFFENTLICHT        PROJEKTE        BÜRO        KONTAKT




       


    
    
    
    

<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>







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;

}


[/HTML]

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              9
              
            

            

              

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.

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              10
              
            

            

              
Hier mal eine :target Variante


<!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

            


            

              
              
              
            


          

          

            

              



              
                  
                  
              11
              
            

            

              
ahh super vielen Dank.


kann ich das target auch iwie doch mousehover ersetzen?

bzw weiß nicht wie.?!?