Bild/er bei Mouseover hervorheben ...

SirJason

Hallo zusammen,

erstmal möchte ich mich entschuldigen, falls bereits ein ähnliches Thema vorhanden ist und ich es in meiner Dummheit nicht gefunden hatte.

Ich habe folgendes Problem/Anliegen:

Ich erstelle im Moment eine Seite für unseren Support in meiner Firma und bin wie viele da draußen ein HTML/CSS - Noob.

Um es ganz einfach zu formulieren möchte ich folgendes erreichen:

ich habe 3 verschieden Submit buttons und 3 verschieden Bilder.
wobei ein Button ein dazugehöriges Bild besitzt. Wenn man über einen bestimmten drüberfährt (MouseOver) soll das dazugehörige Bild hervorgehoben werden (Sei es größer werden, blinken oder ähnliches).

der User muss somit erkennen Können welcher Button für Welches Bild zuständig ist.

Das problem ist natürlich dass die einzelnen Bilder über einen Hintergrundsbild mit fester Position liegen und ich somit nicht einfach mit einer Tabelle die Dazugehörigkeit lösen kann.

Ich hoffe ich habe mich verständlich ausgedrückt, und falls nicht bitte einfach nachfragen.

Könnt Ihr mir hier ein Paar vorschläge bringen wie ich so ein Problem lösen könnte? bzw. bereits mit einem Code Vorschlag?

Ich wär Euch sehr verbunden.

Vielen Dank und Gruß

The User

Entweder benutzst du Javascript mit dem onmouseover-Befehl oder du benutzst den CSS Hover-Effekt für Links (natürlich auch Buttons, halt der <a>-Tag)
Ich weiß nicht wie gut du dich mit CSS auskennst, du muss eine Klasse machen:

Code

<style type="text/css">
div.buttontyp1 a {padding-top: [i]Höhe des anderen Bildes[/i]px; height: [i]Höhe[/i]px; width: [i]Breite[/i]px;}
div.buttontyp1 a:hover {background: url([i]Pfad des anderen Bildes[/i]; height: [i]Höhe[/i]px; width: [i]Breite[/i]px; no-repeat;}
</style>

Das muss in den Head.

Und nun:

Code

<div class="buttontyp1">
<a href="bla">
[img][i]Pfad des einen Bildes[/i][/img]
</a>
</div>

Da wo der Buton gebraucht wird.

Also du wolltest doch, wenn # das auftauchende Bild ist und * das ursprüngliche:
ohne mouseover:

******
mit mouseover:
######
######
######
******

Viele liebe Grüße
The User

Achso: (auf englisch edit )
Mit dem "anderen" Bild meine ich das, was auftauchen soll.
Ist jetzt alles nur mal so dahingeschrieben, probiers mal aus und wenns nicht gleich klappt, schick deinen Code, so wie du ihn dann ausgeführt hast, also mit realen Pixelangaben.
Für die anderen Buttons machst du halt eine ander Klasse nach gleichem Prinzip.

SirJason

Whooot vielen dank für die rasche antwort !!!

Ich kann mittlerweile nachvollziehen wie es gemeint ist, die schwierigkeit bei mir ist nun die Umsetzung.

Mittlerweile würde ich mir wünschen ich hätte das Projekt gar nicht angenommen.
Aber was wäre das Leben ohne Hürden

also bei mir sieht der aktuelle Code so aus

Code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testseite</title>


<style type="text/css">


	.btnSubmit {
		background-color: #0D9D6C;
		width: 130px;
		height: 50px;
		font-weight: 700;
		border-color:#000000;
		border:double;			
	}

	.pctPos {
		background:url(%C3%9Cbersicht_leer.jpg);
		background-position:center;
		background-repeat:no-repeat;	
	}

	.clrHead {
		color: #0D9D6C;
		font-style:normal;
		size:portrait;
	}

	div.Buchhaltung a {padding-top:30px; height:150px; width:150px;}
	div.Buchhaltung a:hover {background:url(../../WS_gro%C3%9F.jpg); height:150; width:150px; no-repeat;}


</style>


</head>


<body>


<table width="983">
	<tr>
		<td width="788"><h1 class="clrHead">Wasserspender &Uuml;bersicht</h1></td>
   		<td align="right">[img]main_logo_topright.gif[/img]</td>
	</tr>
</table>


<hr width="983" color="#0D9D6C" align="left"/>


<form method="post" action="Empfang.cfm">


<table>


	<td>
    	<table>
        	<tr>
            	<td>
                	<input type="submit" name="Buchhaltung" value="Buchhaltung" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="CCA" value="CCA" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="FSC" value="FSC" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="Retail" value="Retail" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
               	  <input type="submit" name="Acer" value="Acer" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
               	  <input type="submit" name="Kantine" value="Kantine" class="btnSubmit" />
                </td>
            </tr>
        </table>
    </td>

    <td class="pctPos" width="670" height="700">
    </td>

    <td><table>
        	<tr>
            	<td>
                	<input type="submit" name="HP" value="HP" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="HP-2" value="HP-2" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="Empfang" value="Empfang" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="GL" value="GL" class="btnSubmit" />
                </td>
            </tr>
            <tr>
            	<td>
                	<input type="submit" name="Peripherie" value="Peripherie" class="btnSubmit" />
                </td>
            </tr>
        </table>
    </td>


</table>


</form>


</body>

Alles anzeigen

nun bekomme ich schwierigkeiten dies umzusetzen.

Ich poste auch mal das hintergrundsbild mit.
Dort erkennt man den Umriss des Gebäudes, und in diesem werden kleine Bilder Verteilt mit fester Positionierung (Kleine Wasserspender).
Nun sind links und rechts Buttons, und bei Mouseover sollen die dazugehörigen Bilder(Wasserspender sich bemerkbar machen )

ich weis ich wiederhole mich, nur ich habe deine Idee versucht umzusetzen jedoch irgendwie ohne Erfolg

Würde es dir was ausmachen mir da ein bischen Genauere Tips zu geben?

Das wär sehr nett

Liebe Grüße

yeti66

SirJason,

vielleicht ist die Lösung eher in Richtung Verweis-sensitive-Grafiken zu finden.? http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Hier noch ein kleines Tutorial mit Gimp http://www.verwaltung.uni-mainz.de/edv/projekte/d…ing/node81.html .

Verfeinern lässt sich die Geschichte, wenn Du die Infos in ein Tooltip [ http://www.dyn-web.com/dhtml/tooltips/ ] einbindest. In einem Tooltip http://www.walterzorn.de/tooltip/tooltip.htm kann man dann auch kleine Bilder nebst formatierten Text zur anzeige bringen.

SirJason

Daran habe ich auch bereits gedacht, jedoch ist die ganze Geschichte noch kompizierter, sprich hinter meine Buttons muss ich Variablen mitvergeben die Wiederrum auch mit Datenbankeinträgen zusammen spielen.

Ich habe den Zweiten Part (Datenbank, e-mailversand, ect.) bereits schon fertig.
funktioniert auch einwandfrei.

nur bei der Verweissensitiver methode sah ich keine Möglichkeit dies zu verwirklichen.

btw. entschuldigt ich arbeite im moment mit Dreamweaver und schreibe das ganze in ColdFusion (zwecks der Datenbank) und PHP wollte mir mein vorgesetzter nicht antun, aus welchen Grund auch immer

also wenn diese möglichkeit nicht besteht mit meine Bilderchen so hervorzuheben dann muss ich wirklich meinen Kasten ausm fenster schmeißen

Gruß

edit: anbei noch das Bild mit Buttons, hier fehlen halt noch die einzelnen kleinen Wasserspender in der Grafik, die kann man sich ja vorstellen

The User

Zunächst hast du das px teilweise vergessen.
Aber wenn ich das jetzt richtig sehe, willst du, dass beim mouseover das Bild an einer ganz anderen Stelle erscheint, oder? Dann wäre Javascript wohl doch praktischer.
Und: Ist es ein Muss Post zu benutzen?

yeti66

SirJason,

jepp, ohne Javascript geht da nichts. Ich dachte ich habe da noch was in Reserve, aber denkste. Javascript ist nicht so mein Ding. Ich vermeide es nach Möglichkeit oder passe mir schon mal was an, wenn nötig. Das dauert dann aber bis alles so funktioniert wie es soll. Suche Dir mal jemanden, der Dir mit JS unter die Arme greifen kann.

SirJason

Das ist lieb Leude, vielen Dank trotzdem Euch

Das Bild soll wo anders erscheinen das ist richtig

Ich schau mal was die Leude in anderen Forums so geschrieben haben.

Liebe Grüße

Edit: Ach ja Post wäre hier natürlich der Vorteil, da mit Get man die Variablen erkennen kann

The User

Ich sag nur onmouseover.
Aber ich hab auch keine Ahnung von Javascript, noch nie was mit gemacht.
Gut, früher oder später werd ichs brauchen.
Das da oben hab ich nur so aufgeschnappt.

Viele liebe Grüße
The User

SirJason

Hi Leude ich hab nun endlich ein hilfe bekommen und mit meiner fantasie ein bischen erweitert, nun klappt es auch endlich :-)))

ist natürlich Javascript

hier falls einem mal der Code interessiert:

Code

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


		<TITLE>Testseite</TITLE>

		<script type="text/javascript">

	         prod1on = new Image();          
	         prod1on.src = "Buchhaltung.jpg";            
	         prod1off = new Image();          
	         prod1off.src = "Uebersicht_leer.jpg";            


	         prod2on = new Image();          
	         prod2on.src = "CCA.jpg";            
	         prod2off = new Image();          
	         prod2off.src = "Uebersicht_leer.jpg";            


	         prod3on = new Image();          
	         prod3on.src = "FSC.jpg";            
	         prod3off = new Image();          
	         prod3off.src = "Uebersicht_leer.jpg";            


	         prod4on = new Image();          
	         prod4on.src = "Retail.jpg";            
	         prod4off = new Image();          
	         prod4off.src = "Uebersicht_leer.jpg";            


	         prod5on = new Image();          
	         prod5on.src = "Acer.jpg";            
	         prod5off = new Image();          
	         prod5off.src = "Uebersicht_leer.jpg";            


	         prod6on = new Image();          
	         prod6on.src = "Kantine.jpg";            
	         prod6off = new Image();          
	         prod6off.src = "Uebersicht_leer.jpg";            


			 prod7on = new Image();          
	         prod7on.src = "HP.jpg";            
	         prod7off = new Image();          
	         prod7off.src = "Uebersicht_leer.jpg";


			 prod8on = new Image();          
	         prod8on.src = "HP_2.jpg";            
	         prod8off = new Image();          
	         prod8off.src = "Uebersicht_leer.jpg";


			 prod9on = new Image();          
	         prod9on.src = "Empfang.jpg";            
	         prod9off = new Image();          
	         prod9off.src = "Uebersicht_leer.jpg";


			 prod10on = new Image();          
	         prod10on.src = "GL.jpg";            
	         prod10off = new Image();          
	         prod10off.src = "Uebersicht_leer.jpg";


			 prod11on = new Image();          
	         prod11on.src = "Peripherie.jpg";            
	         prod11off = new Image();          
	         prod11off.src = "Uebersicht_leer.jpg";


	function rollon(x) {
	        imgOn = eval('prod' + x +"on.src");
	        document ['prod'].src = imgOn;


	}

	function rolloff(x) {
	        imgOff = eval('prod' + x + "off.src");
	        document ['prod'].src = imgOff;


	}
	// -->


	</script>


	</HEAD>
	<BODY>
			<TABLE>
			<TR>

			<TR>
            	<table>
				<TD VALIGN=TOP>
					[img]Uebersicht_leer.jpg[/img]
				</TD>
                </table>
				<TD VALIGN=TOP>
						<input type="submit" value="Buchhaltung" 
                        onMouseOver="rollon(1); return false;" onMouseOut="rolloff(1); return false;"></input>


						<input type="submit" value="CCA" 
                        onMouseOver="rollon(2); return false;" onMouseOut="rolloff(2); return false;"></input>


						<input type="submit" value="FSC" 
                        onMouseOver="rollon(3); return false;" onMouseOut="rolloff(3); return false;"></input>


						<input type="submit" value="Retail" 
                        onMouseOver="rollon(4); return false;" onMouseOut="rolloff(4); return false;"></input>


						<input type="submit" value="Acer" 
                        onMouseOver="rollon(5); return false;" onMouseOut="rolloff(5); return false;"></input>


						<input type="submit" value="Kantine" 
                        onMouseOver="rollon(6); return false;" onMouseOut="rolloff(6); return false;"></input>


						<input type="submit" value="HP" 
                        onMouseOver="rollon(7); return false;" onMouseOut="rolloff(7); return false;"></input>


						<input type="submit" value="HP_2" 
                        onMouseOver="rollon(8); return false;" onMouseOut="rolloff(8); return false;"></input>


						<input type="submit" value="Empfang" 
                        onMouseOver="rollon(9); return false;" onMouseOut="rolloff(9); return false;"></input>


						<input type="submit" value="GL" 
                        onMouseOver="rollon(10); return false;" onMouseOut="rolloff(10); return false;"></input>


						<input type="submit" value="Peripherie" 
                        onMouseOver="rollon(11); return false;" onMouseOut="rolloff(11); return false;"></input>


						
					</TD>
				</TR>
			</TABLE>
	</BODY>

Alles anzeigen

Vielen Dank nochmal an alle die Mir geholfen hatten.

Edit(h) sagt: der Clou hier ist, dass ich eigentlich das Bild überlade, zwar hab ich nun viele Verschieden Bilder, der Enduser sieht es als ein einziges Bild.
Ich musste natürlich von meiner ursprünglichen Idde abweichen, das Gesamtergebnis habe ich aber trotzdem erreicht

Liebe Grüße

Tags