Beiträge von SirJason

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

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

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

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

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ß

Beiträge von SirJason

Bild/er bei Mouseover hervorheben ...

Bild/er bei Mouseover hervorheben ...

Bild/er bei Mouseover hervorheben ...

Bild/er bei Mouseover hervorheben ...

Bild/er bei Mouseover hervorheben ...