Master_of_what
Ensign
- Registriert
- Sep. 2006
- Beiträge
- 253
[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 Main Site
Meinem Momentane CSS Datei
VIELEN VIELEN Dank schonmal fürs lesen und vielleicht auch helfen.
LG Vince
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
Zuletzt bearbeitet:
