[CSS][HTML][JAVA] Zwei Seiten ineinander faden / onclick / mouseover

Master_of_what · 12. Februar 2015

[CSS][HTML][JAVAScript] Zwei Seiten ineinander faden / onclick / mouseover

Guten Tag,

ich bin noch relativ neu im Schreiben von Websites und komme leider immer wieder zu Problemen die ich alleine leider noch nicht lösen kann. Ehrlich gesagt weis ich auch nicht genau wie ich den Thread Titel genau beschreiben soll weil es für mich etwas kompliziert ist. Trotzdem will ich lernen wie so eine Website richtig aufgebaut wird, also bitte verbessern wo nur möglich!!!

Nun zum Problem:

Meine erste Seite (index.html) soll bei einem klick auf das Logo zur zweiten Seite (main.html)springen. Das ist kein Problem durch eine Verlinkung. Das Logo soll aber bei einem Klick drauf, an eine bestimmte Position auf der nächsten Seite wandern und verändern. Logo in index.html soll zu schwarzem Sechseck in main.html werden.

Hier zur Veranschaulichung zwei Bilder:

index.html

main.html

Wenn dieses Ereigniss passiert ist also das Logo voll verschwunden und des schwarze Sechseck 100% angezeigt wird sollen die restlichen weissen Sechsecke, vom schwarzen Sechseck ausgehend, langsam erscheinen.

Ist sowas möglich wenn ja wie setze ich das ganze in CSS/HTML/JAVAScript um?
Hab meine HTML und CSS Codes angehängt und hoffe dass jemand einem Anfänger im Websiten bauen helfen kann.
Hab im Internet schon gesucht aber gab leider für mein Thema noch keine helfende antwort. Vielleicht hab ich auch nur falsch gesucht.

HTML Index Site

HTML:

<!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>Vita architecture</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="backgroundLogo"> 
<a href="Site/main.html"><img src="__LOGO__/Logo.jpg" width="945" height="591" /></a> 
</div>
</body>
</html>

HTML Main Site

HTML:

<!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>Vita architecture</title>
<link href="../CSS/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="background">
    
        <a href="http://www.google.de">
   	<img class="master" src="../__Bilder__/Master.png" width="117" height="102"/>
    	</a>
   	<img class="light" src="../__Bilder__/Light.png" width="117" height="102" />  
    	<img class="furniture" src="../__Bilder__/Furniture.png" width="117" height="102" />
    	<img class="shading" src="../__Bilder__/Shading.png" width="117" height="102" />
    	<img class="living" src="../__Bilder__/Living.png" width="117" height="102" />  	
    	<img class="concrete" src="../__Bilder__/Concrete.png" width="117" height="102" />
       	<img class="campus" src="../__Bilder__/Campus.png" width="117" height="102" />
    	<img class="hotel" src="../__Bilder__/Hotel.png" width="117" height="102" />
       	<img class="vita-ar" src="../__Bilder__/Vita Ar.png" width="117" height="102" />					
        <img class="vita" src="../__Bilder__/Vita.png" width="117" height="102" />
    	<img class="contact" src="../__Bilder__/Contact.png" width="117" height="102" />
       	<img class="impressum" src="../__Bilder__/Impressum.png" width="117" height="102" />

</div>
</body>
</html>

Meinem Momentane CSS Datei

Code:

@charset "utf-8";

/*	===========================================================
	Einstellungen für den Body
	===========================================================*/
	
.background {
	width: 720px;
	height: 606px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	margin-top: 150px;
}

.backgroundLogo {
	width: 945px;
	height: 591px;
	position: relative;
	margin-right: auto;
	margin-left: auto;
	margin-top: 150px;
}

a:focus {
   outline:none;
}

/*	===========================================================
	Einstellungen für die Sechsecke
	===========================================================*/
.master {
	height: 102px;
	position: absolute;
}
.light {
	height: 102px;
	position: absolute;
	top: 114px;
}
.furniture {
	height: 102px;
	position: absolute;
	left: 100px;
	top: 57px;
}
.shading {
	height: 102px;
	position: absolute;
	left: 100px;
	top: 172px;
}
.living {
	height: 102px;
	position: absolute;
	left: 100px;
	top: 286px;
}
.concrete {
	height: 102px;
	position: absolute;
	left: 200px;
	top: 229px;
}
.campus {
	height: 102px;
	position: absolute;
	left: 300px;
	top: 172px;
}
.hotel {
	height: 102px;
	position: absolute;
	left: 300px;
	top: 286px;
}
.vita-ar {
	height: 102px;
	position: absolute;
	left: 400px;
	top: 343px;
}
.vita {
	height: 102px;
	position: absolute;
	left: 500px;
	top: 401px;
}
.contact {
	height: 102px;
	position: absolute;
	left: 500px;
	top: 513px;
}
.impressum {
	height: 102px;
	position: absolute;
	left: 600px;
	top: 458px;
}

/*	===========================================================
	Float Clear
	===========================================================*/
	
.flt-clr { 
	clear: both; 
}

VIELEN VIELEN Dank schonmal fürs lesen und vielleicht auch helfen.

LG Vince

max_1234 · 12. Februar 2015

Tut mir wirklich leid, aber sowas wird niemand unbezahlt für dich machen

Natürlich ist es möglich. Im Grunde würde man nur alles von folgender Seite hier übersetzt vorkauen. Also direkt der Link:
http://www.w3schools.com/css/css3_animations.asp

mfg,
Max

Daaron · 12. Februar 2015

Was willst du bloß mit Java? Java hat im Web (zumindest im Frontend) nichts zu suchen.... JavaScript hat hingegen nichts mit Java zu tun!

Aber max hats ja schon passend beschrieben: Am Ende läuft es weitestgehend auf eine recht komplexe Orgie von CSS3 Animationen, insbesondere Keyframes, hinaus. Unter Umständen muss man mit JavaScript noch etwas nachhelfen.

Eines kann ich dir aber direkt sagen: Landing Pages ohne jeglichen verwertbaren Content (also nix maschinenlesbares) sind vielleicht hübsch, verfehlen aber das eigentliche Ziel einer Webseite: Als Werbefläche zu dienen. Das Primärziel einer Webseite ist es, Menschen zu informieren, oftmals um diese Menschen als Kunden zu gewinnen. Diese Menschen kommen quasi ausschließlich über Suchmaschinen zu dir. Das hebelt deine Startseiten-Idee aus. Das Zeug war vor 10-15 Jahren mal noch trendy....

Master_of_what · 12. Februar 2015

Hi Max, danke für deine schnelle Antwort.

Ich will ja nicht dass mir einer meine Website macht sondern eher jemanden der mir hilfestellung gibt und mir sagt wo ich nachhschauen muss um meine Ziele zu erreichen.

Es scheitert leider schon daran die richtigen Wörter für mein vorhaben zu finden.

@ Daaron schon wieder was gelernt meinte natürlich Javascript!

Dh dadurch dass auf meiner Startseite (index.html) nur ein Bild ist wird die Seite keiner im Internet finden versteh ich das so richtig?

Midnight Sun · 12. Februar 2015

Vielleicht kannst du damit etwas anfangen: jquery load transition effect

Daaron · 12. Februar 2015

Master_of_what schrieb:
Dh dadurch dass auf meiner Startseite (index.html) nur ein Bild ist wird die Seite keiner im Internet finden versteh ich das so richtig?

Im weitesten Sinne: Ja.
Die genaue Funktionsweise von Crawlern und dem Suchindex ist weitaus komplexer, aber Fakt ist, dass solche inhaltsleeren Seiten keinen Sinn machen und deinem Suchmaschinen-Ranking nachhaltig schaden.

Master_of_what · 13. Februar 2015

Danke für eure Antworten!

ich werde mal weiterarbeiten und schauen wie die ich die Seite dank euren Tipss weiter gestallte!

Suche

[CSS][HTML][JAVA] Zwei Seiten ineinander faden / onclick / mouseover

Master_of_what

Ensign

max_1234

Captain

Daaron

Fleet Admiral

Master_of_what

Ensign

Midnight Sun

Commander

Daaron

Fleet Admiral

Master_of_what

Ensign