Seite 1 von 2
Bildausschnitte verlinken Photoshop
Verfasst: Fr 7. Okt 2011, 21:41
von Patrick
Huhu zusammen,
ich habe mal gehört, dass man aus einer Grafik mehrere einzelteile als Link einbauen kann.
Geht das?
Mein Vorhaben ist eine schlichte Grafik mit mehreren kleinen Zeichnungen drauf zu gestalten.
Und aus dieser großen Grafik sollen die kleinen Zeichnungen zu verschiedenen Textseiten verlinkt werden.
Um sich das mal etwas besser vortsellen zu konnen, versuche ich es mal etwas besser zu erklären.
Stellt euch bspw. einen mittelgroßen Kreis vor, an den mehrere kleine Zeichnungen hängen. Und diese einzelnen
Zeichnungen sollen dann zu bestimmten Textseiten verlinkt werden. Weiß einer wie das geht?
Würde mich freuen, wenn man mir darüber Tips geben kann.
Vielen Dank im voraus!
LG
Patrick
Re: Bildausschnitte verlinken Photoshop
Verfasst: Fr 7. Okt 2011, 22:14
von Patrick
Ich hab da was gefunden, was recht interessant ist.
Leider fehlt da aber die onmouseover funktion
. Sprich beim berühren soll man dass besser sehen.
Kann man das abändern?
Ich will ein design für eine einzelne Seite haben. Quasi so wie oben beschrieben. Das sieht mir aber nach einer mammutaufgabe aus
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Verweis-sensitive Grafiken definieren - map, area, usemap</title>
</head>
<body>
<h1>Schnell zur Stadt oder Region Ihrer Wahl!</h1>
<p>
<img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="rect" coords="11,10,59,29"
href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
<area shape="rect" coords="42,36,96,57"
href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
<area shape="rect" coords="42,59,78,80"
href="http://www.mainz.de/" alt="Mainz" title="Mainz">
<area shape="rect" coords="100,26,152,58"
href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
<area shape="rect" coords="27,113,93,134"
href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
<area shape="rect" coords="100,138,163,159"
href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
<area shape="rect" coords="207,77,266,101"
href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg">
<area shape="rect" coords="282,62,344,85"
href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
<area shape="rect" coords="255,132,316,150"
href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg">
<area shape="rect" coords="78,182,132,200"
href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
<area shape="rect" coords="142,169,200,193"
href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
<area shape="rect" coords="140,209,198,230"
href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
<area shape="rect" coords="187,263,222,281"
href="http://www.ulm.de/" alt="Ulm" title="Ulm">
<area shape="rect" coords="249,278,304,297"
href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
<area shape="poly" coords="48,311,105,248,96,210,75,205,38,234,8,310"
href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
</map>
</p>
</body>
</html>
Re: Bildausschnitte verlinken Photoshop
Verfasst: Fr 7. Okt 2011, 22:44
von Patrick
so, ich hab mal eine grafik gebastelt 1024 x 768px. Gibt einen befehl, dass
die Grafik den kompletten bildschirm ausfüllt? Egal ob man einen 19" oder 38"
Bildschirm hat? Dann würde ich die Grafik nämlich größer machen.
Re: Bildausschnitte verlinken Photoshop
Verfasst: Fr 7. Okt 2011, 22:48
von moni
also ich hab das so verstanden Patrick ..
du bastelst dir ein Bild dann zerlegst den in Teile...und jede Einzel teil soll zu eine HP führen..bzw. verlinkt mit eine Seite sein....
das ist doch einfach ...
Code: Alles auswählen
<a href=" Hier kommt link vom Seite " target ="_blank"><img src=" URL grafik " border ="o"></a>
und zwar jede klein teil muss so verlinkt sein.....oder hst an was anderes gedacht...mit mouse over Effekt?
wenn ja da wenn ich mich recht erinnere hast schon mal so was gehabt mit den Bilder was sich schwarz weiß auf bunt gemacht haben !
Re: Bildausschnitte verlinken Photoshop
Verfasst: Fr 7. Okt 2011, 22:51
von moni
Patrick hat geschrieben:so, ich hab mal eine grafik gebastelt 1024 x 768px. Gibt einen befehl, dass
die Grafik den kompletten bildschirm ausfüllt? Egal ob man einen 19" oder 38"
Bildschirm hat? Dann würde ich die Grafik nämlich größer machen.
wenn sich die Grafik wiederholt
repart da kann sie den ganze Bildschirm füllen
Re: Bildausschnitte verlinken Photoshop
Verfasst: Sa 8. Okt 2011, 19:51
von Patrick
huhu moni,
ich habe es jetzt herausgefunden, wie das ganze funktioniert. Es ist zwar etwas Aufwändig, aber
das Ergebnis und die neuen Möglichkeiten dazu entschguldigen den Aufwand.
Hier mal das Ergebnis:
http://patschwork.npage.de/link_51055577.html
Aber da dies noch nicht kompliziert genug ist, muss es noch schwieriger werden. Ich glaube aber,
dass mir da nur die besten helfen können
.
Und zwar möchte ich gerne, das sich die Grafiken bei mouseover farbig darstellen. Sprich man
geht mit der Maus über "Handytaschen", soll das Motiv farbig dargestellt werden. Mir ist bewusst,
dass ich für jede Grafik eine zusätzliche benötige.
Aber wie kann ich dass am besten codieren?
Ich lass einfach mal den code da und lass mich überraschen, ob man mir dabei helfen kann.
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Shopübersicht</title>
</head>
<style type="text/css">
body {
background-image:url();
background-repeat: repeat;
background-attachment: fixed;
background-position: center center;
background-color: #775121;
font-family: 'Buda', arial, serif;
font-size: 16px;
}
</style>
<body>
<center>
<p>
<img src="http://file1.npage.de/009238/11/bilder/test_1.gif" width="1024" height="768" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="circle" coords="210,410,60"
href="http://patschwork.npage.de/taschen___clutch_34309999.html" alt="Koblenz" title="Taschen / Clutch">
<area shape="rect" coords="285,55,740,165"
href="http://patschwork.npage.de/" alt="Taschen / Clutch" title="Startseite">
<area shape="circle" coords="840,240,65"
href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Handytaschen" title="Handytaschen">
</map>
</p>
</center>
</body>
</html>
Re: Bildausschnitte verlinken Photoshop
Verfasst: Sa 8. Okt 2011, 21:02
von moni
Ich halte mich hier nicht für die beste ,denke aber du kannst damit versuchen
Code: Alles auswählen
<style type="text/css">
<!--
a.bild1 { display:block; background-image:url(bild schwarz weiß); width:100px; height:100px }
a.bild1:hover { background-image:url(bild bunt); width:100px; height:100px }
=-->
</style>
</head>
<body>
<table border="2" bordercolor=""bgcolor="" cellpadding="3" cellspacing="3">
<tr>
<td><a class="bild1" href="HP URL"></a> </td>
</tr>
</table>
</body>
</html>
Kannst allerdings beliebig erweitern umbauen usw normale weise muss damit sehr gut klar kommen !
Re: Bildausschnitte verlinken Photoshop
Verfasst: Sa 8. Okt 2011, 21:39
von Patrick
huhu moni,
na das problem ist aber, dass der code doch mit in dem alten beigefügt werde muss.
Re: Bildausschnitte verlinken Photoshop
Verfasst: So 9. Okt 2011, 09:55
von moni
na da binde ihm den ein Patrick ....diesen Code wird nicht das Rest Beeinflussen oder stören....
CSS in CSS Bereich und HTML in HTML Bereich ...
Du hast doch schon mal so ne Geschichte gemacht....
http://www.oyla.de/cgi-bin/eigenes.cgi? ... d=09008089
das war hier mit einen JS gemacht...ist viel besser als meinen einfachen CSS ....
Re: Bildausschnitte verlinken Photoshop
Verfasst: Mo 10. Okt 2011, 18:23
von Patrick
erstmal danke moni für deine hilfe!
Habe immernoch das Problem mit der Pinnwand, die eigentlich über den gesamten Bildschirm gehen soll
.
Ich habe hier bspw. einen großen Bildschirm, wo ich ständig die wiederholungen sehe.
Nun nochmal zur frage.
Wie und wo stelle ich das so ein, dass das bild über den gesamten Bildschirm geht ohne wiedreholungen.
Dass man das Bild auf einem 19" Monitor und auf einem 26" Monitor ganz sieht?
Ich verzweifel gerade föllig
Ich bedanke mich schon jetzt für eure Hilfen!
lg
patrick
Code: Alles auswählen
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Shopübersicht</title>
</head>
<style type="text/css">
body {
background-image:url(http://file1.npage.de/009238/11/bilder/pinnwand_neu.gif);
background-repeat: no repeat;
background-position: center center;
background-color: #775121;
font-family: 'Buda', arial, serif;
font-size: 16px;
}
</style>
<body>
<center>
<p>
<img src="http://file1.npage.de/009238/11/bilder/pinnwand_neu.gif" width="1024" height="768" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte">
<area shape="circle" coords="180,240,130"
href="http://patschwork.npage.de/taschen___clutch_34309999.html" alt="Koblenz" title="Taschen / Clutch">
<area shape="rect" coords="285,55,740,165"
href="http://patschwork.npage.de/" alt="Startseite" title="Startseite">
<area shape="circle" coords="800,290,150"
href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Handytaschen" title="Handytaschen">
<area shape="circle" coords="500,430,150"
href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Tierzubehör" title="Tierzubehör">
<area shape="circle" coords="195,610,150"
href="http://patschwork.npage.de/handytaschen_48005481.html" alt="Sale" title="Sale">
</map>
</p>
</center>
</body>
</html>