Bilder transparent / "3D"

VanTriel

Leute!
Voller Euphorie möchte ich mich bei Euch bedanken! Es hat geklappt!
Ich habe mich gestern durch sämtliche Codes und PS-Foren gelesen und habe es schlussendlich hinbekommen.
Jetzt kommt jedoch eine neue Frage auf, was graphisch denke ich sehr anspruchsvoll ist.
auf der Seite http://staging.vantriel.de/?page_id=22 seht ihr die transparente datei.

Meine Frage nun, kann man es graphisch so darstellen, dass wenn ich auf ein Dokument klicke, das farblich angezeigt wird und per mausklick dann als pdf datei vergrößert wird?
Schwierig das zu erklären!

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

SirEctor

Ich könnte mir da was mit Image Map vorstellen, aber ist nicht mal eben so erklärt. Musst Dich da selbst mal reinlesen:
http://www.html-world.de/program/html_14.php

Gibt auch (online) Tools, die Dir viel Arbeit abnehmen. Farbig bekommst Du die einzelnen Area-Bereiche evtl. über CSS.

VanTriel

Okay, das schau ich mir doch mal an. Die farbliche Markierung ist jetzt nicht unbedingt notwendig, man sollte halt nur erkennen, dass man bei einem mouseover die datei vergrößern kann. Das Problem ist, dass ich nicht weiss, wie man diese Gestaltung nennt. Da gibt es sicherlich einige hilfreiche tutorials. danke vorerst!

VanTriel

VIELEN VIELEN DANK! Es hat geklappt!
Nur es gibt ein problem. egal auf welches feld man klickt, es öffnet sich immer das selbe dokument. :-(

PHP

<HTML>
<HEAD>
<TITLE>OhneTitel-1</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<!-- ImageReady Slices (OhneTitel-1) -->
<IMG SRC="http://staging.vantriel.de/wp-content/uploads/2013/02/test1-723x1024.png" WIDTH=584 HEIGHT=827 BORDER=none ALT="" USEMAP="#Zertifikatos_Map">
<MAP NAME="Zertifikatos_Map">
<AREA SHAPE="poly" ALT="" COORDS="1482,3330, 2130,3342, 2112,2448, 1494,2442" HREF="http://s14.directupload.net/images/130220/2rdl59vr.jpg">
<AREA SHAPE="poly" ALT="" COORDS="954,2844, 1638,2850, 1386,1968, 834,1950" HREF="http://s1.directupload.net/images/130220/z5f7eix5.jpg">
<AREA SHAPE="poly" ALT="" COORDS="66,2040, 120,3048, 858,2916, 624,2028" HREF="http://s1.directupload.net/images/130220/evi5muhd.jpg">
<AREA SHAPE="poly" ALT="" COORDS="2394,2784, 2454,1926, 1890,1896, 1698,2736" HREF="http://s14.directupload.net/images/130220/xhcvvymr.jpg">
<AREA SHAPE="poly" ALT="" COORDS="1938,1194, 1302,1170, 1314,2034, 1938,2028" HREF="http://s1.directupload.net/images/130220/kwev2esl.jpg">
<AREA SHAPE="poly" ALT="" COORDS="108,1344, 324,2190, 942,2010, 714,1188" HREF="http://s1.directupload.net/images/130220/nv23zr5m.jpg">
<AREA SHAPE="poly" ALT="" COORDS="828,582, 720,1446, 1314,1554, 1440,672" HREF="http://s1.directupload.net/images/130220/iatxlo6p.jpg">
<AREA SHAPE="poly" ALT="" COORDS="1824,66, 1602,942, 2190,1146, 2304,72" HREF="http://s14.directupload.net/images/130220/6fk2dad6.jpg">
<AREA SHAPE="poly" ALT="" COORDS="66,138, 162,1158, 786,1002, 600,132" HREF="http://s7.directupload.net/images/130220/a9ih8nvt.jpg">
</MAP>
<!-- End ImageReady Slices -->
</BODY>
</HTML>

Alles anzeigen

Domino5702

Ich glaube, das hat mit dem letzten Eintrag im Imagemap zu tun:

Code

[COLOR=#000000][COLOR=#007700]<[/COLOR][COLOR=#0000BB]AREA SHAPE[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"poly" [/COLOR][COLOR=#0000BB]ALT[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"" [/COLOR][COLOR=#0000BB]COORDS[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"66,138, 162,1158, 786,1002, 600,132" [/COLOR][COLOR=#0000BB]HREF[/COLOR][COLOR=#007700]=[/COLOR][COLOR=#DD0000]"http://s7.directupload.net/images/130220/a9ih8nvt.jpg"[/COLOR][COLOR=#007700]>[/COLOR][/COLOR]

[COLOR=#000000][COLOR=#007700]
[/COLOR][/COLOR]
Der überdeckt alles andere, wenn ich das richtig lese[COLOR=#000000][COLOR=#007700]
[/COLOR][/COLOR]

VanTriel

also wenn ich die gespeicherte imagemap datei in html öffne in firefox, dann klappt das. ich habe die datei in editor übernommen und gespeichert. dann wurde erstmal nichts angezeigt, weil die fotodatei nur als "fotobezeichnung" gespeichert ist und nicht als bilddatei.

VanTriel

wenn ich den letzten eintrag rausnehme, kann man gar keine datei mehr seperat öffnen. komisch...
wenn ich die imagedatei nämlich in den editor konvertiere habe ich zwar den code, als bild wird aber bilder/bild1.png angezeigt und wenn ich das aktualisiere sieht man nichts. das kann ja nicht sein....

Domino5702

Sorry, ich bin nur schnell drüber - Du musst halt sorgfältig arbeiten, da sind möglicherweise andere Fehler drin.

Und wieso hast Du da den Code für eine komplette HTML-Seite? Du willst hoffentlich nicht den kompletten Code einer HTML-Seite in ein WordPress einkopieren???

VanTriel

Hallo. Also ich habe die Image-Datei über Photoshop aus einem Tutorial erstellt. diese sollte ich als html + image datei speichern. gesagt - getan. wenn ich die html datei öffne in firefox, dann funktioniert diese. sobald ich aber einen quellcode in wordpress eingebe mit der datei, funktioniert das nicht. man kann nur die a4 seie oben links in der ecke öffnen, die sich auf das ganze bild verlinkt.

Meathor

Hallo

Schau dir den Quelltext mal im FireFox an (Rechtsklick ins Browserfenster => Seitenquelltext anzeigen)

Da wirste sehen das du den gesammten quelltext von IMG-Ready reinkopiert hast (also <html><body> usw sind nun 2 mal da), die Rot Markierten Stellen sind mögliche Problemstellen und just um die ImgMap drumrum ist so ne stelle ;)

Das solltest du erstmal ausbessern.

Johede

Zitat von rekloV

Entweder Dein Browser kann keine Transparenz in PNGs darstellen, oder Du hast beim Abspeichern vergessen mitzuteilen, dass die weissen Bereiche transparent dargestellt werden sollen.

Nein, so ist es nun auch nicht.
Ich habe genau dasselbe Problem und ich kenne mich ein bischen aus.
Ich habe das Bild in Gif-format mit transparentem Hintergrund gespeichert, in Wordpress hochgeladen und die transparenten Teile werden schwarz dargestellt, egal welchen Browser ich benutze.

Vielleicht kann man mir einen Tipp geben.
Gruß
Johede

Johede

Zitat von Johede

Nein, so ist es nun auch nicht.
Ich habe genau dasselbe Problem und ich kenne mich ein bischen aus.
Ich habe das Bild in Gif-format mit transparentem Hintergrund gespeichert, in Wordpress hochgeladen und die transparenten Teile werden schwarz dargestellt, egal welchen Browser ich benutze.
Vielleicht kann man mir einen Tipp geben.
Gruß
Johede

Also ich hab es jetzt selber gefunden.
Man sollte es NICHT als GIF speichern sondern nur als PNG wenn der Hintergrund transparent bleiben soll.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Bilder transparent / "3D"

Jetzt mitmachen!