Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Dynamic Header eventuell Flash ?“

wasweisich

Photoshop user

Hallo,
seid langer Zeit habe ich endlich wieder mal Zeit um Privat ein paar Dinge zu erledigen ^^ aber schon bald bin ich an meine grenzen gestoßen ... Nun brauche ich eure Hilfe.

Und zwar. ...

Ich bin nebenbei in einer Band unterwegs, für diese mache ich die Homepage. Letztens hatten wir Fotoshooting wo ein paar wirklich geile Bilder entstanden sind.... z.B. eins wo wir "nur" als silhouette zu sehen sind.... Da kam mir die Idee ...

Auf der Homepage das Header Foto zu animieren ... in dem Sinne das wenn man auf den Umriss der jeweiligen Person klickt, weitergeleitet wird auf die persönliche Biografie Seite.

Wie würdet ihr das machen und einem Newbie erklären ?

Danke
 

patrick_l

Hat es drauf

Wie würdet ihr das machen und einem Newbie erklären ?
Mit "allem" aber sicher nicht mit Flash. Denn wenn es lediglich um die Darstellung von Video, Bilder und/oder Grafiken geht, hat Flash im heutigen Web nichts mehr verloren. Es gibt so oder so mehr Gründe, die gegen als für Flash sprechen.

Um jetzt deine eigentliche Frage zu beantworten. Für solche Spielereien ist eine SVG-Grafik am besten geeignet. Diese jedoch nicht als externe Datei, sondern über den SVG Tag im Markup einfügen. Danach können Pfade und Flächen wunderbar mit Hilfe von JavaScript (jQuery) und/oder CSS3 animiert werden.
[...]und einem Newbie erklären ?
Wie schaut es bei dir bezüglich HTML, CSS(3) und JavaScript (jQuery) Kenntnis aus? Ist wenigstens rudimentäres Grundlagenwissen vorhanden? Ebenso solltest du zum Erstellen der SVG Grafik mit einem Vektorprogramm wie Illustrator, Draw, FreeHand oder Inkscape umgehen können.

Liebe Grüße, Patrick
 

patrick_l

Hat es drauf

Mit "allem"? Na, dann schafft es evtl. auch der html5maker. Ausprobiert habe ich ihn allerdings nicht.
Genau genommen sprechen wir hier ja von einer "simplen" Navigation, bei der lediglich der Hover-Zustand animiert werden soll. Mit dem von dir verlinkten html5maker kann man so etwas vielleicht zusammenklicken. Trotzdem zu einer eingebetteten SVG Grafik mit xlink rate. Mit "allem" sollte lediglich betonnen, das für mich Flash überhaupt nicht in Frage kommt.

Liebe Grüße, Patrick
 

wasweisich

Photoshop user

So nun, habe ich mich ein wenig mit der Materie Beschäftigt aber da sind dann noch ein paar Fragen entstanden...

Wie kann ich ...

das Bild ist Schwarz (8 Personen) und je nach dem über welchen Körper man gleitet mit der Maus soll dieser "in Naturfarben leuchten" und bei Klick auf die Seite mit der Biografie verweisen.

Ist dies immernoch mit einer SVG Grafik möglich ?

Mit Illustrator Html und CSS kann ich arbeiten aber Javascript ... :D

Danke
 
G

Gelöschtes Mitglied 633957

Guest

Xlink ist nicht so meins und ich wüsste auch nicht wie der Bildwechsel zu realisieren ist, aber
Mit Illustrator Html und CSS kann ich arbeiten
Dir sollte folgende Idee gefallen:
  • Hier der Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>

<head>
<title>CSS Sprites: Image Slicing's Kiss of Death</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style media="screen">

#blobs {
width: 300px;
height: 150px;
background: url(blobs.gif);
margin: 10px auto; padding: 0;
position: relative;
}
#blobs li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}

#blobs a {display: block;}

#blob1 {left: 9px; top: 7px; width: 86px; height: 130px;}
#blob2 {left: 77px; top: 16px; width: 79px; height: 86px;}
#blob3 {left: 160px; top: 0px; width: 112px; height: 77px;}
#blob4 {left: 173px; top: 57px; width: 120px; height: 80px;}
#blob5 {left: 110px; top: 102px; width: 98px; height: 45px;}
#blob1 a {height: 130px;}
#blob2 a {height: 86px;}
#blob3 a {height: 77px;}
#blob4 a {height: 80px;}
#blob5 a {height: 45px;}

#blob1 a:hover {background: url(blobs.gif) -10px -307px no-repeat;}
#blob2 a:hover {background: url(blobs.gif) -77px -166px no-repeat;}
#blob3 a:hover {background: url(blobs.gif) -160px -300px no-repeat;}
#blob4 a:hover {background: url(blobs.gif) -173px -207px no-repeat;}
#blob5 a:hover {background: url(blobs.gif) -110px -402px no-repeat;}

</style>
</head>


<body>
<ul id="blobs">
  <li id="blob1"><a href="#"></a></li>
  <li id="blob2"><a href="#"></a></li>
  <li id="blob3"><a href="#"></a></li>
  <li id="blob4"><a href="#"></a></li>
  <li id="blob5"><a href="#"></a></li>
</ul>
</body>
</html>
Wenn meine Idee nichts für Dich ist, dann kann Dir @patrick_l sicher noch weitere Tipps geben.

Besten Gruß, Ty
 

patrick_l

Hat es drauf

Ist dies immernoch mit einer SVG Grafik möglich ?
Auch das ist kein Problem. Innerhalb von SVG Grafiken sind auch Pixel-basierte Inhalte möglich. Dafür lediglich innerhalb des SVG Tags das Image-Element (Image-tag) verwenden und dessen Quellenverweis (href) mit xlink: ergänzen.
Code:
 <svg>    
  <image xlink:href="assets/img/image.jpg" x="0" y="0" /> 
</svg>
Hier zusätzlich der Link zum Mozilla Developer Network:


Was responsive Webdesign und das verlustfreie Skalieren der SVG Grafik angeht, solltest du berücksichtigen, das Rastergrafiken/bilder nicht verlustfrei skaliert werden können. Daher solltest du benötigen Bilder in passender Größe und im verlustfreien PNG Format einbinden. Mit passender Größe wäre die maximale Darstellung deines Headers gemeint. Die Bilder dann lediglich runter-skalieren. Ansonsten solltest du dir Lösung von @tynick nochmal anschauen.

Edit:
Da lediglich der Hover-Status mit einem Bild versehen werden soll, würde auch das zuweisen per CSS infrage kommen. Möglichkeiten sind also genug da.

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben