mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Do 18.04.2024 06:31 Benutzername: Passwort: Auto-Login

Thema: Programmier-Problem: iframe alternative! vom 17.08.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Programmier-Problem: iframe alternative!
Autor Nachricht
rockcity_nippes
Threadersteller

Dabei seit: 22.07.2008
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Di 17.08.2010 09:39
Titel

Programmier-Problem: iframe alternative!

 Antworten mit Zitat Zum Seitenanfang
guten morgen liebe gemeinde,

ich habe ein problem. bin selbst nur printer und kenne mich mit digitalem kram nicht sooo bombig aus. wie auch immer .... bin grad dabei nen website entwurf zu realisieren. klappt soweit perfekt, keine probleme. bis auf eins (hierzu folgende skizze):




beim ersten öffnen der seite findet ihr o.a. situation vor. Bild1 befindet sich links groß dargestellt und einmal rechts als thumbnail in klein. darunter noch 3 weitere bilder zunächst nur als thumbnail. beim klicken auf eines der thumbnails sollen sich diese bilder nun in groß öffnen.

geschafft umzusetzen habe ich dies bereits mit nem iframe. klappt auch einwandfrei. nur leider erlaub die plattform für die die seite ist keine iframes. meine frage ist jetzt: kann ich das anders realisieren? die bildgrößen sind bereits fix im layout programmiert und können nicht mehr geändert werden. gibts da ne alternative zum iframe?

danke für die hilfe.

lg.

Zuletzt bearbeitet von rockcity_nippes am Di 17.08.2010 09:39, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 17.08.2010 09:50
Titel

Antworten mit Zitat Zum Seitenanfang
Hier eine Pure-CSS Lösung:
Gallerie
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
rockcity_nippes
Threadersteller

Dabei seit: 22.07.2008
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Di 17.08.2010 09:56
Titel

Antworten mit Zitat Zum Seitenanfang
dank dir ... geht auf jedenfall in die richtung ... nur scheinbar muss ich dafür zahlen. dass muss doch auch selbst hinzukriegen sein ...
  View user's profile Private Nachricht senden
SimonDerDude

Dabei seit: 15.01.2010
Ort: error: undefined
Alter: 35
Geschlecht: Männlich
Verfasst Di 17.08.2010 10:57
Titel

Antworten mit Zitat Zum Seitenanfang
Zitat:
nur scheinbar muss ich dafür zahlen

Quatsch!
Saug dir das Addon "Firebug" für den Firefox.
Anschließend klick unten rechts auf das Käferchen, und untersuche die Seite sowie den Aufbau.
Links ist HTML, rechts das dazugehörende CSS.

*bäh*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
rockcity_nippes
Threadersteller

Dabei seit: 22.07.2008
Ort: Köln
Alter: -
Geschlecht: Männlich
Verfasst Di 17.08.2010 11:10
Titel

Antworten mit Zitat Zum Seitenanfang
ok. nochmals danke Lächel

hab mich jetzt mal durch den kram durchgekämpft (trotz fast GARKEINER) auhnung und hab nun mal folgendes ergebnis erzielen können:

http://www.chin-tonic.de/test.html

hier mal der code dazu:

Zitat:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
<!--

.galerie{
font-size:1em;
margin-left:27px;
width:476px;
margin-top:7px;
padding-left:0;
}

.pic-navi{
padding:7px 0 3px 7px;
width:97px;
float:left;
}
.pic-navi a img{
width:72px;
padding:0px;
margin:1px 1px 2px 1px;
border:1px solid #4089AC;
float:left;
}
.pic-navi a:active img{
border:1px solid #000000;
}
div.pic-navi a{
padding:0;
margin:0;
}
div.pic-navi a span {
display: none;
color:#ff0000;
background:#efefef;
}
div.pic-navi a:active{
color: #411;
background: #ffffff;
padding:0;
margin:0;
}


div.pic-navi a:active span{
display: block;
position: absolute;

width: 316px;
padding: 213px 15px 6px 20px;
margin: 1px 0 0 106px;
z-index: 100;


}
a#pic1:active span{background-image:url(http://unrealitymag.com/wp-content/uploads/2010/06/pacman_11.jpg);}
a#pic2:active span{background-image:url(http://lh6.ggpht.com/_AUMtcbXDbUI/SusJvD5afhI/AAAAAAAAA10/fb1MkH53yCQ/s800/pac-man_ghosts_blinky_inky.jpg);}
a#pic3:active span{background-image:url(http://unrealitymag.com/wp-content/uploads/2010/06/pacman_11.jpg);}
a#pic4:active span{background-image:url(http://lh6.ggpht.com/_AUMtcbXDbUI/SusJvD5afhI/AAAAAAAAA10/fb1MkH53yCQ/s800/pac-man_ghosts_blinky_inky.jpg);}

-->
</style>


<body>

<div class="galerie">

<div class="pic-navi">
<a id="pic1">

<img src="http://unrealitymag.com/wp-content/uploads/2010/06/pacman_11.jpg" />
<span>&nbsp;</span>
</a>

<a id="pic2">
<img src="http://lh6.ggpht.com/_AUMtcbXDbUI/SusJvD5afhI/AAAAAAAAA10/fb1MkH53yCQ/s800/pac-man_ghosts_blinky_inky.jpg" />
<span>&nbsp;</span>
</a>

<a id="pic3">

<img src="http://unrealitymag.com/wp-content/uploads/2010/06/pacman_11.jpg" />
<span>&nbsp;</span>
</a>

<a id="pic4">
<img src="http://lh6.ggpht.com/_AUMtcbXDbUI/SusJvD5afhI/AAAAAAAAA10/fb1MkH53yCQ/s800/pac-man_ghosts_blinky_inky.jpg" />
<span>&nbsp;</span>
</a>

</div>


</body>
</html>


grundsätzlich schonmal was womit man was anfangen kann. aber noch folgendes:

1. die bilder sollen nach anklicken an der position verharren, bis ein nächstes bild dahin kommt!
2. wie krieg ich das bild in groß auf 100% skaliert? hier is ja jetzt nurn ausschnitt zu sehen *Schnief*
3. ich kann das ganze NUR durch manuelle "pixel"-positionierung unterbringen, oder!?

danke nochmals Lächel
  View user's profile Private Nachricht senden
 
Ähnliche Themen IFRAME Problem
Problem iFrame und IE6
Iframe Problem nur bei IE7!
Problem mit iFrame
Iframe Problem / Rahmen
iframe als layout - problem.
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB