zweites Bild im Hintergrund laden - geht das überhaupt ?

cali

erstmal Hallo in die Runde !

vielleicht könnt Ihr mir ja helfen

hab mir mit einem CMS eine HP gebaut
das meiste läuft auch...

Zitat

<HTML><head>

<title>$SITE_NAME$ - $PAGE_NAME$</title>
<link type="text/css" rel="StyleSheet" href="http://meinesite.de/src/css/958.css"></head><body style="margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;">

<div style="background: rgb(254, 215, 84) url(http://meinesite.de/t/958/1.jpg) repeat-x scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><div align="center">
</div>

============================================================================
<table style="background: transparent url(http://meinesite.de/hp/new4.jpg) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0">[/code]
============================================================================

<tbody><tr>
<td style=" seitenüberschrift.... usw usw

nun würde ich gerne das Bild "new4.jpg" slicen..

lokal klappt das auch alles incl Imagemap

nur weiss ich nicht, wie ich nicht wie+wo ich das nächste bild einfügen kann....

fangen wir mal einfach an:
hab also aus Blid new4.jpg --> new4.jpg und new5.jpg gemacht
einfach senkrecht geteilt...

wo und wie muss ich nun new5.jpg einfügen, damit das Bild auch geladen wird ?

geht das überhaupt - nach was muss ich suchen, damit ich weiterkomme ?

----------

denn eigentlich wollte ich das new4.jpg weiter slicen und noch ein imagespot bzw Hotspot einfügen.:

Zitat

<table id="tab01" width="684" height="449" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="mysite/hp/201.jpg" width="684" height="51" alt="blablabla"></td>
</tr>
<tr>
<td>
<img src="mysite/hp/202.jpg" width="21" height="348" alt="blablabla"></td>
<td>
<img src="mysite/hp/203.jpg" alt="" width="259" height="348" border="0" usemap="#Map"></td>
<td>
<img src="mysite/hp/204.jpg" width="404" height="348" alt="blablabla"></td>
</tr>
<tr>
<td colspan="3">
<img src="mysite/hp/205.jpg" width="684" height="50" alt="blablabla"></td>
</tr>
</table>

<map name="Map"><area shape="rect" coords="4,6,256,343" href="hp/neuesbild.jpg" target="_blank" alt="blablabla">
</map>

Alles anzeigen

also die Tabelle mit dem Imagemap funzt alleine

wo liegt mein Denkfehler ? - wie kann ich das in den obigen Code einfügen, damit sogar das imagemap funktioniert ?

thx 4 Hilfe !
cali

driver

ohne nen link is des alles schwer vorzustellen...

cali

Zitat

<table style="background: transparent url(http://meinesite.de/hp/new4.jpg) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0">

es geht doch lediglich um die Frage - wie kann ich hier ein zweites Bild einfügen ? - brauchst Du dazu wirklich den Link ?

es sollen nur zwei Bilder nebeneinander geladen werden

als Vorstellungshilfe:

Zitat

<table style="background: transparent url(http://meinesite.de/hp/new4.jpg +http://meinesite.de/hp/new5.jpg ) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0">

wie sieht das richtig aus ?
cu

driver

geht nicht. da musst dann schon beide bilder in eine grafik packen
via photoshop, gimp etc, und dann diese grafik einbinden...

cali

Zitat

geht nicht. da musst dann schon beide bilder in eine grafik packen
via photoshop, gimp etc, und dann diese grafik einbinden...

so sieht die Site ja zZ auch aus
NUR:

ich würd an der Stelle eben gern Slices mit einer Imagemap hinterlegen,
weil die Ein-Bild-Lösung unzureichend ist

Frage: wie wäre da vorzugehen ?

cu

cali

hab Dir eine PM geschickt

driver

öhm.. nö, du hast mir keine pm geschickt. was auch nicht notwendig is.
gib mal nen link... hier im forum..

cali

Code

[edit]meine-site.de

es geht um den Zahn im Header (das soll ein Imagemap werden)

Dank für Deine Hilfe
cu

driver

naja, dann nimm den zahn als bild, wenns a imagemap werden soll kannst
des ja eh net als background einbinden. und den farbigen rest nimmst als
hintergrund.

ich versteh ganz ehrlich nicht wo dein problem is... bzw wo du den zusammenhang
siehst zwischen 2 backgrounds und einem image-map

cali

na ja Du sagst es ja selber:

Zitat

wenns a imagemap werden soll kannst
des ja eh net als background einbinden

- das wär jetzt geklärt

das Bild links kann ich zwar einfügen, nur zerhaut es mir dann das gesamte Layout

Zitat

<table style="background: transparent url(http://meinesite.de/hp/new4.jpg) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0">

ich brauch ja das Hintergrundbild, damit der Seitentitel und die Öffnungszeiten dargestellt werden...

wie ist es nun möglich, ein Bild links von dem Hintergrundbild einzufügen ?

~ bin halt kein Coder - hab nur rudimentäre html-Kenntnisse ~

Danke nochmal
cu

driver

naja, nimm des hintergrundbild, öffne das ganze in photoshop (o.ä.), schneide
den zahn aus und speicher ihn als bild ab. dann öffnest des hintergrundbild erneut
und übermalst den zahn - damit du n einheitlichen background hast.

den zahn positionierst dann z.b. in nen div-container, richtest ihn mit css aus und
legst dann des bild bzw die map rein (definition dazu findest bei selfhtml)

cali

Zitat

naja, nimm des hintergrundbild, öffne das ganze in photoshop (o.ä.), schneide
den zahn aus und speicher ihn als bild ab. dann öffnest des hintergrundbild erneut
und übermalst den zahn - damit du n einheitlichen background hast.

das ist alles erledigt

Zitat

den zahn positionierst dann z.b. in nen div-container, richtest ihn mit css aus und legst dann des bild bzw die map rein (definition dazu findest bei selfhtml)

ok - und dann ?
das ist die eigentliche frage wo ich nicht weiterkomme...

wie bleibt dann das HG-Bild erhalten ? - wie kann ich das neben meinem Bild positionieren ?

thx

driver

naja, du bindest den zahn ja als bild ein - also als inhalt.
des andere liegt im hintergrund... inhalt liegt auf dem hintergrund

cali

ich probier es... - das könnte helfen

erstmal thx - für soweit !

cali

supi !
wir sind auf dem richtigen Weg

hab es soweit mit nem Div-Container gerichtet
zumindest für Firefox

der IE zerkachelt mir das Layout

magst Du Dir das nochmal ansehen ?
wieso stellt der IE die Seite ganz anders dar

Code

meinesite.de

--------------------------------------------------

bislang liegt im HG noch ein grosses Bild

Code

http://meinesite.de/hp/new5.jpg

als Slice und auf das richtige Format gebracht
wäre es das hier:

Code

meinesite.de/hp/new4_03.jpg

--------------------------------------------------

der Code wie es zur Zeit aussieht und mit FF funzt:

Code

<div style="background: rgb(254, 215, 84) url(http://meinesite.de/1.jpg) repeat-x scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;"><div align="center">


 </div>


<div id="Layer1" style="position:absolute;
width:243px; height:449px; z-index:1; background-color:#fed754;
border: 0px solid #000000; left: 0px; top:23px"><a href="http://meinesite.de/index/0-21" target="_self"
 onmouseover="window.status='welcome'; return true;"
 onmouseout="window.status=''; return true;">
 <img src="../hp/new4_02.jpg" width="243" height="449" border="0"[B]</a>[/B]</div>


<table style="background: transparent url(http://meinesite.de/hp/new5.jpg) no-repeat scroll 0% 0%; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial;" width="100%" border="0" cellpadding="0" cellspacing="0"><tbody><tr>


<td style="padding-left: 320px;" width="70%" height="449"><span style="color: rgb(231, 68, 0); font-family: bold Verdana,Tahoma; font-style: normal; font-variant: normal; font-weight: normal; font-size: 18pt; line-height: normal; font-size-adjust: none; font-stretch: normal;"><br>hier die Seitenüberschrift</span></div></td> 
<td width="30%" height="449"><div style="" id="boxMenu"><div style="display:inline;" id="menuDiv"><!-- xMenu --><ul class="uz">

Alles anzeigen

Grüsse
cali

driver

ich würd sagen du bereinigst deinen absolut grauenhaften quelltext.

wer div-container, style-angaben und iframes VOR das <html>-tag setzt,
der hat vermutlich kein plan von dem, was er da tut. so kann das nicht
funktionieren...

cali

wieso VOR das HTML-Tag ?
das steht alles NACH dem HTML-Tag

das meiste wird ja von dem CMS vorgegeben...

ich hab lediglich das hier eingefügt:

Code

<div id="Layer1" style="position:absolute;
width:243px; height:449px; z-index:1; background-color:#fed754;
border: 0px solid #000000; left: 0px; top:23px"><a href="http://meinesite.de/index/0-21" target="_self"
 onmouseover="window.status='welcome'; return true;"
 onmouseout="window.status=''; return true;">
 <img src="../hp/new4_02.jpg" width="243" height="449" border="0"[B]</a>[/B]</div>

driver

Code

<style type="text/css">#adBegunaYrLrW {z-index:10;position:absolute;top:0;left:0;padding:1px 2px 2px 0px;}.cAdBaYrLrW {position:absolute;top:0px;left:0px;width:100%} div > div.cAdBaYrLrW {position:fixed;}#adTextaYrLrW {z-index:9;position:absolute;top:0;left:0;width:100%;line-height:22px;background:#FFCC00;border-bottom: 1px outset;}}</style><!--[if gte IE 5.5]><![if lt IE 9]><style type="text/css">div#aBarVaYrLrW {width:expression(((ignoreMe=(document.documentElement.clientWidth?document.documentElement.clientWidth:document.body.clientWidth))<200?200:ignoreMe)+'px');position:absolute;top:expression((ignoreMe2=document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop)+'px');left:expression((ignoreMe=document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft)+'px');}</style><![endif]><![endif]--><div id="adBaraYrLrW"><div class="cAdBaYrLrW" id="aBarVaYrLrW">
<div style="position:absolute;z-index:999; right:25px; top:1px">
<table border="0" cellpadding="0" cellspacing="0" onmousedown="this.className='downBtn'" onmouseover="this.className='overBtn'" onmouseout="this.className='outBtn'"><tr><td class="myBtnLeft"><img border="0" src="http://s101.ucoz.net/img/1px.gif"></td><td class="myBtnCenter"><div class="myBtnCont x-unselectable" unselectable="on" onclick="window.open('http://www.ucoz.com/?uz=12137');"><a href="javascript://" onclick="return false;">Web-Seite erstellen</a></div></td><td class="myBtnRight"><img border="0" src="http://s101.ucoz.net/img/1px.gif"></td></tr></table>
</div>
<div style="position:absolute;z-index:999; right:5px; top:3px">
<a href="javascript://" onmouseover="document.getElementById('clobutaYrLrW').src='http://s101.ucoz.net/img/bn/clo0.gif'" onmouseout="document.getElementById('clobutaYrLrW').src='http://s101.ucoz.net/img/bn/cl0.gif'" onclick="document.getElementById('adBaraYrLrW').style.display='none';return false;"><img id="clobutaYrLrW" title="Schließen" align="absmiddle" border="0" src="http://s101.ucoz.net/img/bn/cl0.gif" width="14" height="14"></a>
</div>
<div id="adTextaYrLrW"><iframe frameborder="0" id="adIfraYrLrW"  width="100%" scrolling="no" allowTransparency="true" style="height:22px;background-color:#FFCC00" src="http://a.ucoz.net/popup/?ref=http%3A%2F%2Fzahnarzt-kiel.ucoz.de%2F&par=OhJz6oc8cx77z3810bYXYvjnZEJEL3u-mRGUMRe-Z41k1EdHy-3-ozEHkfdWVgpm9Q4cCqrbgL3LKGOvjDbTOLPskeFl6W1jJqnrWEljSZfgxdsJ36YShcLJL8MxZ6NqUbQ1fLxu23Oh-HVjipIMNpsG5_15M-mt_sQQA5aNF7zbOimGTsjs"></iframe></div>
</div></div><script type="text/javascript">
var curbState=0;var timerbOver=-1;var timerbOut=-1;function chIfSizeaYrLrW(m){var d = document.getElementById('adIfraYrLrW');var h = parseInt(d.style.height);if (m=='+' && h<44){document.getElementById('adIfraYrLrW').style.height=(h+2)+'px';setTimeout("chIfSizeaYrLrW('+')",20);}else if (m=='-' && h>22){document.getElementById('adIfraYrLrW').style.height=(h-2)+'px';setTimeout("chIfSizeaYrLrW('-')",20);}}
function openBanListT(t){if (t){chIfSizeaYrLrW('+');curbState=1;}else {chIfSizeaYrLrW('-');curbState=0;}if (timerbOver>=0){clearTimeout(timerbOver);timerbOver=-1;}if (timerbOut>=0){clearTimeout(timerbOut);timerbOut=-1;}}




document.getElementById("adBaraYrLrW").style.height=document.getElementById("adTextaYrLrW").offsetHeight+'px';</script>
<HTML><head>


<title>Zahnarztpraxis-Kiel - Hauptseite</title>

Alles anzeigen

ich seh dann noch ein paar ungeschlossene tags... z.b. ein <img ohne >...
da den fehler zu finden, bei den ganzen validatorfehlern..

cali

wo findest Du den ?
eigentlich sollte der Bereich unangetastet sein...

aber vielleicht hats etwas beim editieren zerrissen

thx 4 reply

cali

Zitat

bei den ganzen validatorfehlern..

das halte ich ja nun für übertrieben

aber ein gutes STICHWORT war es schon

hab mir mal nen HTML-Validator in FF als Erweiterung gegönnt
& voila

da fehlte ein "</a>" vor </div>

nun gehts auch im IE

manchmal hilft auch "einfach darüber zu reden"

Tags