|
 |
  |
| Autor |
Nachricht |
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
 Verfasst am: 01.03.2008, 12:00 Titel: Aus Bild mehrere kleine Bilder abgrenzen |
 |
|
Moin
Ich hab mal ne Frage und zwar habe ich vor, bei meiner Homepage ein Bild von einem Mann mit voller Ausrüstung (Paintball Homepage -> Weste, Waffe...) in mehrere kleine Bilder zu unterteilen, sprich dass man dann den Mann in voller Montur sieht und dann aber z.b. auf die Waffe klicken kann und dann popt sich ein neues Fenster auf und die Waffe wird in Groß dargestellt mit ein paar Infos. Das mit dem aufpopen, dafür habe ich schon ein script gefunden, ich weiß jetzt nur nicht wie ich bei dem Bild die kleinen Bilder abgrenzen soll, damit die kleinen Bilder angeklickt werden können. Jemand eine Idee?
Thx!
|
|
| Nach oben |
|
 |
umt
Helfer [User]
Anmeldung: 29.11.07
Beiträge: 186
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 01.03.2008, 14:36 Titel: |
|
|
Super danke, nur hab ich dazu noch ein paar Fragen:
| Zitat: | <.img src="karte.png" width="345" height="312" border="0" alt="Karte" usemap="#Landkarte">
<map name="Landkarte"> |
bei src="" kommt das Gesamtbild rein oder?
bei alt="" kommt irgendein Name des Gesamtbild rein?!
und bei usemap=""?
| Zitat: | | <area shape="rect" coords="11,10,59,29" |
was muss ich bei coords angeben, hab die beschreibung irgendwie nicht kapiert 
Aber wie grenze ich jetzt die einzelnen Grafiken ab, damit die anklickbar sind?
|
|
| Nach oben |
|
|
umt
Helfer [User]
Anmeldung: 29.11.07
Beiträge: 186
|
| Verfasst am: 01.03.2008, 15:03 Titel: |
|
|
| Zitat: | | bei src="" kommt das Gesamtbild rein oder? |
Ja.
| Zitat: | | bei alt="" kommt irgendein Name des Gesamtbild rein?! |
Ja.
| Zitat: | | und bei usemap=""? |
In das img-Tag kommt der Name der Map, für die das Bild als Grundlage verwendet wird.
Bei dir dann z.B.:
| Code: | <img src="Mann.png" width="345" height="312" border="0" alt="Mann" usemap="#Mann">
<map name="Mann"> |
Es ist aber völlig egal, wie du sie nennst. Wichtig ist nur, dass das usemap-Attribut(hier halt noch mit "#" davor) im img-Tag und das name-Attribut im map-Tag den selben Wert haben.
| Zitat: | | Aber wie grenze ich jetzt die einzelnen Grafiken ab, damit die anklickbar sind? |
Für jeden Bereich, der anklickbar sein soll, definierst du jetzt (gehen wir mal von einem viereckigen Bereich aus) die linke obere Ecke und die rechte untere Ecke mit
| Code: | <area shape="rect" coords="x1,y1,x2,y2"
href="Waffe.jpg" alt="Waffe" />
|
Im Attribut "coords":
x1 = Pixel von links zur linken oberen Ecke des jeweiligen anklickbaren Bereichs (der in unserem Beispiel die Form eines Rechtecks hat) von links innerhalb der gesamten Grafik.
y1 = Pixel von oben zur linken oberen Ecke des Ausschnitts.
x2 = Pixel von links zur rechten unteren Ecke
y2 = Pixel von oben zur rechten unteren Ecke
So legst du jedesmal ein Rechteck um den zu vergrössernden Bereich, der dann wie ein Link funktioniert.
Ich glaube, besser kann ichs nicht erklären.
_________________
 www.netzonaut.de
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 01.03.2008, 17:02 Titel: |
|
|
Super erklärt, wenn ich das jetzt richtig verstanden habe dann geht das mit den coords so oder?
http://www.hostpix.de/file.php?dat=advlB5lv.JPG
der rote bereich ist der, der dann anklickbar ist?!
Aber wie finde ich die Pixel, von der Stelle die ich abgrenzen will, raus?
|
|
| Nach oben |
|
|
placido
Erfahrener [User]
Anmeldung: 16.10.07
Beiträge: 98
|
| Verfasst am: 01.03.2008, 18:05 Titel: |
|
|
ein hoch auf Dreamweaver 
Bei dem kannst du wie bei Photoshop direkt alle Stellen anklicken und erstellt die Map mti den Coords automatisch. Lad dir die Testversion von Adobe.com runter und installier Dreamweaver CS3. Dann ruf deine Seite auf und klick auf das Image im Design Bereichv on Dreamweaver. Unten Links erscheinen dann 3 Symbole in hell blau. Da wählst du dann das "Tool für mehreckige Hotspots.
Dann nur noch mit Klicks das Bild umrahmen und fertig ist der Code.
_________________
Suche Linktausch für folgende themen:
Garten, Wellness, Immobilien, Webdesign, SEO, Typo3, Internet, Hotels, Urlaub, Reisen.
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 02.03.2008, 00:17 Titel: |
|
|
Da steig ich jetzt nicht ganz durch, was soll ich bei PS und was bei DW machen?
|
|
| Nach oben |
|
|
placido
Erfahrener [User]
Anmeldung: 16.10.07
Beiträge: 98
|
| Verfasst am: 02.03.2008, 13:32 Titel: |
|
|
das mti PS war nur um klar zu machen, dass zwischen den beiden eine verbindugn besteht. Folge einfach den anweisungen ab den worten "lad dir...". Das müsste reichen um deine Bedürfnisse zu befriedigen
_________________
Suche Linktausch für folgende themen:
Garten, Wellness, Immobilien, Webdesign, SEO, Typo3, Internet, Hotels, Urlaub, Reisen.
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 02.03.2008, 14:36 Titel: |
|
|
| placido hat folgendes geschrieben: | | das mti PS war nur um klar zu machen, dass zwischen den beiden eine verbindugn besteht. Folge einfach den anweisungen ab den worten "lad dir...". Das müsste reichen um deine Bedürfnisse zu befriedigen |
Jetzt hab ichs verstanden  Wenn ich das so nach deiner Variante mach, dann brauch ich den Code von dem Link von umt ja gar nicht mehr oder?
|
|
| Nach oben |
|
|
placido
Erfahrener [User]
Anmeldung: 16.10.07
Beiträge: 98
|
| Verfasst am: 02.03.2008, 15:35 Titel: |
|
|
nein, wenn du aus DW alles rauskopierst was dafür relevant ist dann reicht das.
Musst alles kopieren von <map> bis </map> , also alles was dazwischen ist.
_________________
Suche Linktausch für folgende themen:
Garten, Wellness, Immobilien, Webdesign, SEO, Typo3, Internet, Hotels, Urlaub, Reisen.
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 02.03.2008, 18:29 Titel: |
|
|
| placido hat folgendes geschrieben: | | Dann ruf deine Seite auf und klick auf das Image im Design Bereich von Dreamweaver. |
Was für ein Designbereich? Bei mir gibts nur "Code", "Teilen", "Entwurf"
|
|
| Nach oben |
|
|
placido
Erfahrener [User]
Anmeldung: 16.10.07
Beiträge: 98
|
| Verfasst am: 02.03.2008, 18:37 Titel: |
|
|
entwurf = design
_________________
Suche Linktausch für folgende themen:
Garten, Wellness, Immobilien, Webdesign, SEO, Typo3, Internet, Hotels, Urlaub, Reisen.
|
|
| Nach oben |
|
|
Bulldok
Erfahrener [User]
Anmeldung: 27.02.08
Beiträge: 80
Wohnort: BaWü
|
| Verfasst am: 02.03.2008, 20:04 Titel: |
|
|
Super ich habs gefunden, war ein bisschen versteckt, jetzt muss ich das ja nur noch in den Code einfügen und es müsste funktionieren  Aber kann ich das auch so einstellen, dass wenn man da dann draufklickt, dass dann nicht eine ganz neue Seite geöffnet wird sondern nur ein kleines Fenster indem das Bild in größer dargestellt wird?
|
|
| Nach oben |
|
|
placido
Erfahrener [User]
Anmeldung: 16.10.07
Beiträge: 98
|
| Verfasst am: 02.03.2008, 20:08 Titel: |
|
|
| Bulldok hat folgendes geschrieben: | | Super ich habs gefunden, war ein bisschen versteckt, jetzt muss ich das ja nur noch in den Code einfügen und es müsste funktionieren Aber kann ich das auch so einstellen, dass wenn man da dann draufklickt, dass dann nicht eine ganz neue Seite geöffnet wird sondern nur ein kleines Fenster indem das Bild in größer dargestellt wird? |
da ist dann ganz unten rechts ein kleines dreick, damit rufst du die erweiterten eigenschaften auf.
_________________
Suche Linktausch für folgende themen:
Garten, Wellness, Immobilien, Webdesign, SEO, Typo3, Internet, Hotels, Urlaub, Reisen.
|
|
| Nach oben |
|
|
|
|
  |
|
Alle Zeiten sind GMT + 1 Stunde
|
| Seite 1 von 1 |
|  |
