Rollover mit aufklappendem Bild

Kearney · 29.12.2008

Hallo zusammen

Ich brauche mal schnell eure Hilfe

Und zwar designe ich gerade meine Webseite um und scheitere dabei an einem "Rolloverbild".

Ein normales Rollover funktioniert ohne Probleme mit onmouseover - allerdings will ich, dass beim Drüberfahren mit der Maus ein grösseres Bild erscheint - also quasi aufklappt. Ist das ohne Java etc. möglich? Dass ich quasi nur noch irgendein kürzel einfügen muss? Jetzt sieht es so aus:

<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','bsp.jpg',1)"><img src="bspklein.jpg" name="Image8" width="134" height="200" border="0">

Dankeschön schon mal

lg

Liebling373 · 29.12.2008

AW: Rollover mit aufklappendem Bild

du bist auf dem richtigen weg!

<script
language="JavaScript">

</script>

das sollte den gewünschten effekt bringen

ahso der erste teil im head und der jetzt hier an der gewünschten stelle

<a href="LINK"

onmouseover="austausch1.src='email.jpg';"
onmouseout="austausch1.src='knopf.jpg';">

<img src="knopf.jpg"
border="0" width="71"height="60"
name="austausch1">
</a>

wenn dir das nicht hilft, dann schau hier noch mal da gibt es genügend beispiele: http://www.on-mouseover.de/switch/switch.html

Arya_Svitkona · 19.01.2009

AW: Rollover mit aufklappendem Bild

hat dir das geholfen oder meinst du etwas in Stil?(Menü Button)
Ich habe auch lange gebraucht bis ich es soweit hatte, aber ich kann dir den Code geben.

Chickenshooter · 19.01.2009

AW: Rollover mit aufklappendem Bild

Moin,

Das kannst Du auch ohne JS lösen, ... nur mit CSS geht das auch..

z.B. ein Button mit mouseover effekt:

erstelle eine Grafik mit 120px in der Breite und 70px in der Höhe.

erstelle HTML Datei

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<link href="test.css" rel="stylesheet" type="text/css" />
</head>

<body>
<a id="btnLink" href="#"></a><br />
<a id="btnLink" href="#"></a><br />
<a id="btnLink" href="#"></a><br />
</body>
</html>

einen a Tag ohne Text mit der ID btnLink

so nun CSS

HTML:

#btnLink
{
    display:block;
    width:120px;
    height:35px;
    overflow:hidden;
    background-color:#999999;
    background-image: url(images/testbild.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
}

#btnLink:hover
{
    background-color:#666666;
    background-position: 0px -35px;
}

und schon hast Du nen Mouseover ohne JS

Vorschau

MfG Chick

Kearney · 19.01.2009

AW: Rollover mit aufklappendem Bild

Hallo zusammen

Sorry dass ich erst jetzt antworte - ich war in den Ferien.

@Liebling
Nun ja, da werden die Grössen ja nicht vertauscht, auch beim Link nicht...

@Arya
bei deinem Beispiel bewegt sich bei mir gar nichts - weder beim Drüberfahren noch beim Draufklicken...

@Chickenshooter
Danke für die ausführliche Antwort - aber auch hier werden die Grössen nicht vertauscht - soweit war ich nämlich auch schon

Was ich möchte, ist z.B. ein 50 x 50 px Vorschaubild. Beim darüberfahren mit der Maus bleibt das Bild dort wo es ist und z.B. rechts klappt ein 400 x 600 px Bild auf - also quasi "über" der gesamten Webseite aber halt nicht als Popup. Das müsste doch möglich sein...

Wenn ihr z.B. antwortet und rechts über einen Smiley fahrt, klappt der Beschreibungstext auf (z.B. Weinen oder Uhm etc.) Statt diesem Text müsste nun einfach der Smiley in riesengross erscheinen.

lg

Arya_Svitkona · 19.01.2009

AW: Rollover mit aufklappendem Bild

genau das habe ich auch gemacht...
Aber achtun es funktionier nur auf Firefox mit dem Doctype Transitional...
aber bei Static geht es auf Firefox nicht.

Browser inkompatibilität... eine meiner Aufgabe bei der Webentwicklung.
Eine Browserweiche währe ev. was.

Kearney · 19.01.2009

AW: Rollover mit aufklappendem Bild

@Arya
Ach so - ich habe hier den Internet Explorer, aber ich teste das heute Abend gleich mal mit dem Firefox

Was ist denn eine Browserweiche?¨

lg

Arya_Svitkona · 19.01.2009

AW: Rollover mit aufklappendem Bild

Kearney schrieb:
Hallo zusammen

Sorry dass ich erst jetzt antworte - ich war in den Ferien.

@Liebling
Nun ja, da werden die Grössen ja nicht vertauscht, auch beim Link nicht...

@Arya
bei deinem Beispiel bewegt sich bei mir gar nichts - weder beim Drüberfahren noch beim Draufklicken...

@Chickenshooter
Danke für die ausführliche Antwort - aber auch hier werden die Grössen nicht vertauscht - soweit war ich nämlich auch schon

Was ich möchte, ist z.B. ein 50 x 50 px Vorschaubild. Beim darüberfahren mit der Maus bleibt das Bild dort wo es ist und z.B. rechts klappt ein 400 x 600 px Bild auf - also quasi "über" der gesamten Webseite aber halt nicht als Popup. Das müsste doch möglich sein...

Wenn ihr z.B. antwortet und rechts über einen Smiley fahrt, klappt der Beschreibungstext auf (z.B. Weinen oder Uhm etc.) Statt diesem Text müsste nun einfach der Smiley in riesengross erscheinen.

lg

das ist eben das Problem.... Firefox akzeptiert nur Transitional (art wie HTML geschrieben wird, wie ich es gemacht habe). Dazu gäbe es noch Strict (wie es der Explorer will)

Hier
p.s. versuche es mal mit dem Firefox Explorer. Ich komme aus der Medien Branche und auf meiner Seite wahren laut google Analytics 73% der User mit Firefox.

Eine Browserweiche heisst, dass ein Code in der Website überwacht welcher Browser der "Anseher" hat. Wenn der fall eintritt, dass du Internet Explorer hat, dann macht er .... wenn nicht, dann macht er ....

Sogenannte if = then. verfahren.

Wenn es so ist dann mache

, wenn nicht dann mache

.

Betreff: Chickenshooter

Das würde natürlich auch gehen, jedoch musst du im Code die grösse auf das Bild anpassen. Width and Height

cebito · 20.01.2009

AW: Rollover mit aufklappendem Bild

Kearney schrieb:
Wenn ihr z.B. antwortet und rechts über einen Smiley fahrt, klappt der Beschreibungstext auf (z.B. Weinen oder Uhm etc.) Statt diesem Text müsste nun einfach der Smiley in riesengross erscheinen.

Schau mal hier wz_tooltips, könnte genau das richtige sein für dich.

@Arya - Nur mal so nebenbei, hab mir grad deine Seite angeschaut, wenn dein Layout für 1024er Auflösung optimiert ist, warum verschiebst du es dann noch um 350px nach rechts? Muß man ja immer erst rüberscrollen :rolleyes:

Code:

#main 
    {
    height: 768px;
    width: 1024px;
    [COLOR=Red]margin-left: 350px;[/COLOR]
    position:absolute;
}

Arya_Svitkona · 20.01.2009

AW: Rollover mit aufklappendem Bild

ähm damit es in der Mitte ist mehr oder weniger...
bin im ersten Lehrjahr ^^

cebito · 20.01.2009

AW: Rollover mit aufklappendem Bild

Arya_Svitkona schrieb:
ähm damit es in der Mitte ist mehr oder weniger...
bin im ersten Lehrjahr ^^

Dann schreib margin:auto; und fertig.

Edit: fast vergessen, und nimm das position:absolute; raus.

Arya_Svitkona · 20.01.2009

AW: Rollover mit aufklappendem Bild

ok ... thx

Kearney · 20.01.2009

AW: Rollover mit aufklappendem Bild

@Cebito
Woooow, du darfst Dir was wünschen

Nach 100 Versuchen (ich kann ja bisher überhaupt nicht mit Java programmieren ;-) ) hat es mit den tooltipps geklappt, genau so etwas habe ich gesucht - geschützte Bilder (indem ich das Bild als Background definiere und als Bild eine durchsichtige PNG darüberlege), platzsparend und es funktioniert genau so wie ich will und lässt sich beliebig anpassen.

An dieser Stelle 10000000 Dank dafür, bin gerade superbegeistert.

lg

cebito · 21.01.2009

AW: Rollover mit aufklappendem Bild

Kearney schrieb:
@Cebito
Woooow, du darfst Dir was wünschen

Das überleg ich mir noch genau... :lol:8)