Ergebnis 1 bis 10 von 10

Thema: Bild/er bei Mouseover hervorheben ...

  1. #1
    HTML Newbie
    Registriert seit
    22.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bild/er bei Mouseover hervorheben ...

    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ß
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 &#123;padding-top&#58; &#91;i&#93;Höhe des anderen Bildes&#91;/i&#93;px; height&#58; &#91;i&#93;Höhe&#91;/i&#93;px; width&#58; &#91;i&#93;Breite&#91;/i&#93;px;&#125;
    div.buttontyp1 a&#58;hover &#123;background&#58; url&#40;&#91;i&#93;Pfad des anderen Bildes&#91;/i&#93;; height&#58; &#91;i&#93;Höhe&#91;/i&#93;px; width&#58; &#91;i&#93;Breite&#91;/i&#93;px; no-repeat;&#125;
    </style>
    Das muss in den Head.

    Und nun:
    Code:
    <div class="buttontyp1">
    <a href="bla">
    [img]&#91;i&#93;Pfad des einen Bildes&#91;/i&#93;[/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.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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 &#123;
    		background-color&#58; #0D9D6C;
    		width&#58; 130px;
    		height&#58; 50px;
    		font-weight&#58; 700;
    		border-color&#58;#000000;
    		border&#58;double;			
    	&#125;
    	
    	.pctPos &#123;
    		background&#58;url&#40;%C3%9Cbersicht_leer.jpg&#41;;
    		background-position&#58;center;
    		background-repeat&#58;no-repeat;	
    	&#125;
    	
    	.clrHead &#123;
    		color&#58; #0D9D6C;
    		font-style&#58;normal;
    		size&#58;portrait;
    	&#125;
    	
    	div.Buchhaltung a &#123;padding-top&#58;30px; height&#58;150px; width&#58;150px;&#125;
    	div.Buchhaltung a&#58;hover &#123;background&#58;url&#40;../../WS_gro%C3%9F.jpg&#41;; height&#58;150; width&#58;150px; no-repeat;&#125;
    
    </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>
    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
    Angehängte Grafiken Angehängte Grafiken

  4. #4
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    SirJason,

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

    Hier noch ein kleines Tutorial mit Gimp http://www.verwaltung.uni-mainz.de/e...ng/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.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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
    Angehängte Grafiken Angehängte Grafiken

  6. #6
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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?

  7. #7
    König(in) Avatar von yeti66
    Registriert seit
    21.10.2005
    Ort
    Harz
    Alter
    51
    Beiträge
    1.152
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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.
    Gruß yeti66
    ___________________________________________
    http://www.phpcontact.net/ Kontaktformulare für die eigene Hompage
    http://www.norbert-klippstein.de Freiberuflicher Musiker für individuelle Musikdienstleistungen

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  9. #9
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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

  10. #10
    HTML Newbie
    Themenstarter

    Registriert seit
    22.01.2008
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    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&#40;&#41;;          
    	         prod1on.src = "Buchhaltung.jpg";            
    	         prod1off = new Image&#40;&#41;;          
    	         prod1off.src = "Uebersicht_leer.jpg";            
    
    	         prod2on = new Image&#40;&#41;;          
    	         prod2on.src = "CCA.jpg";            
    	         prod2off = new Image&#40;&#41;;          
    	         prod2off.src = "Uebersicht_leer.jpg";            
    
    	         prod3on = new Image&#40;&#41;;          
    	         prod3on.src = "FSC.jpg";            
    	         prod3off = new Image&#40;&#41;;          
    	         prod3off.src = "Uebersicht_leer.jpg";            
    
    	         prod4on = new Image&#40;&#41;;          
    	         prod4on.src = "Retail.jpg";            
    	         prod4off = new Image&#40;&#41;;          
    	         prod4off.src = "Uebersicht_leer.jpg";            
    
    	         prod5on = new Image&#40;&#41;;          
    	         prod5on.src = "Acer.jpg";            
    	         prod5off = new Image&#40;&#41;;          
    	         prod5off.src = "Uebersicht_leer.jpg";            
    
    	         prod6on = new Image&#40;&#41;;          
    	         prod6on.src = "Kantine.jpg";            
    	         prod6off = new Image&#40;&#41;;          
    	         prod6off.src = "Uebersicht_leer.jpg";            
    
    			 prod7on = new Image&#40;&#41;;          
    	         prod7on.src = "HP.jpg";            
    	         prod7off = new Image&#40;&#41;;          
    	         prod7off.src = "Uebersicht_leer.jpg";
    
    			 prod8on = new Image&#40;&#41;;          
    	         prod8on.src = "HP_2.jpg";            
    	         prod8off = new Image&#40;&#41;;          
    	         prod8off.src = "Uebersicht_leer.jpg";
    
    			 prod9on = new Image&#40;&#41;;          
    	         prod9on.src = "Empfang.jpg";            
    	         prod9off = new Image&#40;&#41;;          
    	         prod9off.src = "Uebersicht_leer.jpg";
    
    			 prod10on = new Image&#40;&#41;;          
    	         prod10on.src = "GL.jpg";            
    	         prod10off = new Image&#40;&#41;;          
    	         prod10off.src = "Uebersicht_leer.jpg";
    
    			 prod11on = new Image&#40;&#41;;          
    	         prod11on.src = "Peripherie.jpg";            
    	         prod11off = new Image&#40;&#41;;          
    	         prod11off.src = "Uebersicht_leer.jpg";
    
    	function rollon&#40;x&#41; &#123;
    	        imgOn = eval&#40;'prod' + x +"on.src"&#41;;
    	        document &#91;'prod'&#93;.src = imgOn;
    
    	&#125;
    	
    	function rolloff&#40;x&#41; &#123;
    	        imgOff = eval&#40;'prod' + x + "off.src"&#41;;
    	        document &#91;'prod'&#93;.src = imgOff;
    
    	&#125;
    	// -->
    
    	</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&#40;1&#41;; return false;" onMouseOut="rolloff&#40;1&#41;; return false;"></input>
    
    						<input type="submit" value="CCA" 
                            onMouseOver="rollon&#40;2&#41;; return false;" onMouseOut="rolloff&#40;2&#41;; return false;"></input>
    
    						<input type="submit" value="FSC" 
                            onMouseOver="rollon&#40;3&#41;; return false;" onMouseOut="rolloff&#40;3&#41;; return false;"></input>
    
    						<input type="submit" value="Retail" 
                            onMouseOver="rollon&#40;4&#41;; return false;" onMouseOut="rolloff&#40;4&#41;; return false;"></input>
    
    						<input type="submit" value="Acer" 
                            onMouseOver="rollon&#40;5&#41;; return false;" onMouseOut="rolloff&#40;5&#41;; return false;"></input>
    
    						<input type="submit" value="Kantine" 
                            onMouseOver="rollon&#40;6&#41;; return false;" onMouseOut="rolloff&#40;6&#41;; return false;"></input>
    
    						<input type="submit" value="HP" 
                            onMouseOver="rollon&#40;7&#41;; return false;" onMouseOut="rolloff&#40;7&#41;; return false;"></input>
    
    						<input type="submit" value="HP_2" 
                            onMouseOver="rollon&#40;8&#41;; return false;" onMouseOut="rolloff&#40;8&#41;; return false;"></input>
    
    						<input type="submit" value="Empfang" 
                            onMouseOver="rollon&#40;9&#41;; return false;" onMouseOut="rolloff&#40;9&#41;; return false;"></input>
    
    						<input type="submit" value="GL" 
                            onMouseOver="rollon&#40;10&#41;; return false;" onMouseOut="rolloff&#40;10&#41;; return false;"></input>
    
    						<input type="submit" value="Peripherie" 
                            onMouseOver="rollon&#40;11&#41;; return false;" onMouseOut="rolloff&#40;11&#41;; return false;"></input>
    
    						
    					</TD>
    				</TR>
    			</TABLE>
    	</BODY>

    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

Ähnliche Themen

  1. Mouseover: Neues Bild Größe ändern
    Von Felix im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 3
    Letzter Beitrag: 30.03.2007, 18:25
  2. Bild mit Mouseover versetzt
    Von schrainer im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 20.03.2007, 00:48
  3. Bild bei mouseover an bestimmer Stelle anzeigen
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 25.09.2005, 20:39
  4. bei mouseover Bild vergrößern und ein Sound abgespielen
    Von erich im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 10
    Letzter Beitrag: 06.09.2005, 15:03
  5. onclick effect auf bild - kein mouseover
    Von ini im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 7
    Letzter Beitrag: 30.11.2004, 13:09

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •