Flashforum - Die Community zu Adobe Flash, Flex AIR. Web Design und Inspiration.

flower11 · 15-10-2009, 08:56

Hallo;

Vielleicht kann mir hier jemand helfen;
ich habe ieb fertiges Script verwendet um einen einfachen Bildaustausch zu erzeugen.

Mein Problem:
ich möchte das Mouse over Bild Positionieren kann ich den
Objektstrang :
onMouseOver= "document.steinweilerr.src='referenzen/big_400/big_Steinweiler_Rapp.jpg'";

Irgendwie erweitern um dem Bild bestimmte Koordinaten oder eine Bestimmte Position zu geben?

<td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="right" valign="top" colspan="2">

<div style="position:absolute; z-index:76;">

<img src="referenzen/pic_120/Steinweiler_Rapp.jpg" name="steinweilerr"
onMouseOver= "document.steinweilerr.src='referenzen/big_400/big_Steinweiler_Rapp.jpg'";
onMouseOut="document.steinweilerr.src='referenzen/pic_120/Steinweiler_Rapp.jpg';">
</div>

</td>

Hoffe es kann mir jemand helfen

Vielen Dank

Nightflyer · 15-10-2009, 09:12

Fang mit der Frage nochmals an..

flower11 · 15-10-2009, 09:17

Sorry;

Was meinst Du wurde mein Problem nicht verstanden??

Nightflyer · 15-10-2009, 09:31

Zitat:

Zitat von flower11

Sorry;

Was meinst Du wurde mein Problem nicht verstanden??

Ja

flower11 · 15-10-2009, 09:44

Also,
der Bildaustausch mit mouseover funktioniert,
das Bild das bei mouse over erscheint wird in vergrößereter
Darstellung angezeit 400 x 200 px und geht deshalb über den
vorgesehenen Layoutramen hinaus.

Ich wollte nun wissen ob es eine Möglichkeit gibt das Mouse over Bild so
zu positionieren das es im Ramen bleibt.

zb. so wie bei der Bildagentur fotolia wenn ich mit der mouse über ein
Bild am rechten fahre wird dieses nicht abgeschnitten in der Vergrößerung
sondern es wird innerhalb des Layoutramens angezeigt..

Hoffe es wurde verstanden

Nightflyer · 15-10-2009, 10:18

Ok, jetzt ist klar

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

	<style type="text/css">

	body{
		background-color: #555555;
	}

	.normal{
		position: absolute;
		left: 50px;
		top: 300px;
		width: 100px;
		height: 100px;
		background-image: url('http://statics.mangaka.de/mangakade/bilder/narachan/104294/engel_erstes_pic_x3_small.jpg' );
	}
	.highlight{
		position: absolute;
		left: 500px;
		top: 100px;
		width: 300px;
		height: 300px;
		background-image: url('http://www.princeton.edu/~aikido/Images/picture_of_the_week.jpg' );
	}

	
	</style>

	<script type="text/javascript">

		$(document).ready( function(){

			$('#img').click( function(){

				$(this).toggleClass("highlight");

			});

		});


	</script>
	
</head>
<body>
	<div id="img" class="normal"></div>
	
</body>
</html>

flower11 · 15-10-2009, 12:11

Danke für deine hilfe,

das war es aber leider nicht,
als Bbeispiel gebe ich mal die Seite an
www.kreativ-massivhaus.de/referenzen.html
das ist die Seite aber ohne die Roll over Bilder nur die Bilder
in klein Format.

An der Seite an der ich gerade Arbeite werden die Bilder bei on mouse Over
im Größerer Darstellung angezeigt.

wenn ich in td 4 und 5 der mit der Maus über die Bilder gehe stehen die
Größeren Bilder über den Layoutrand und ich wollte das diese innerhalb
angezeigt werden.

Die Tabelle hab ich selbst nicht geschrieben
wenn ich zb angebe td align: left zerschägt es bei vergrößerter Darstellung
die Tabelle; deshalb habe ich um die Bilder einen Div gelegt mit z index
und aboluter position damit die großen Bilder über der Tabelle stehen;

nur die vertikale ausrichtung bekomm ich nicht hin....

Ich dachte das geht irgendwie mit Java

Hier der code einer zelle:

<td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="left" valign="top" colspan="2">

<div style="position:absolute; z-index:80">

<img src="referenzen/pic_120/albersweiler_1.jpg" name="irgendeinname"
onMouseOver= "document.irgendeinname.src='referenzen/big_400/big_albersweiler_1.jpg'";
onMouseOut="document.irgendeinname.src='referenzen/pic_120/albersweiler_1.jpg';">
</div>
</td>

Also ich möchte nur das onMouseOver img positionieren

Nightflyer · 15-10-2009, 22:35

Ok, hab mich mal an die Arbeit gemacht. Das Script macht jetzt praktisch alles automatisch

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
        <title>test</title> 
        
        <style type="text/css">
        
        	#layer{
	        	
	        	width: 400px;
	        	height: 300px;
	        	background-color: #AAA;
	        	border: 4px double black;
	        	padding: 20px;
	        	display: none;
	        	
        	}
        	
        	#layer img{
	        	
	        	border: 1px solid white;
	        	
        	}
    
        </style>
        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
	        $.fn.obj2MousePos = function( par ) // Objekt an der Mausposition ausrichten
			{ 
				return this.each(function(){
					var posX = parseInt('0');
					var posY = parseInt('0');
	
					var e = par.curEvent;
					var holdInViewport = par.holdInViewport;
	
					var offW = jQuery(this).width();
					var offH = jQuery(this).height();
	
					var mouseX = e.pageX;
					var mouseY = e.pageY;
	
					var corX = ( par.corX ) ? parseInt(par.corX) : 0;
					var corY = ( par.corY ) ? parseInt(par.corY) : 0;
	
					var windowX = jQuery(window).width();
					var windowY = jQuery(window).height();
	
					if( holdInViewport )
					{
						if(( mouseX + corX ) > 0 )
							posX = mouseX + corX;
	
						if(( mouseX + corX + offW ) > windowX )
							posX = windowX - offW;
	
						if(( mouseY + corY ) > 0 )
							posY = mouseY + corY;
	
						if(( mouseY + corY + offH ) > windowY )
							posY = windowY - offH;
					}
					else
					{
						posX = mouseX + corX;
						posY = mouseY + corY;
					}
					jQuery(this).css({ left: parseInt(posX), top: parseInt(posY), position: 'absolute' });
				});
			};

        
		$(document).ready( function(){
			
			$(document).mousemove(function(e){
				
				$('#layer').obj2MousePos({
					
					curEvent: e, // aktuelles Event
					holdInViewport: true, // im Dokument halten
					corX : -225, // Ausrichtungskorrektur X
					corY : 30 // Ausrichtungskorrektur Y
					
				});
				
			});
			
			$('#anzeigetabelle img').each( function(){
				
				$(this).hover( function(){
					
					$('#layer').show();	//Layer anzeigen
					
					pic_url = $(this).attr( 'src' ); //URL auslesen
					
					url_new = pic_url.replace( /pic_120\//g, 'big_400/big_' ); //Pfad ändern
					
					$('#img_placeholder').attr( 'src', url_new ); //URL zuweisen
					
					
				}, function(){
					
					$('#layer').hide(); //Layer ausblenden
					
				});
				
			});

			
		});
        
        </script>
        
    </head> 
    <body> 
    
    	<div id="layer">
    	
    		<img id="img_placeholder" src="" alt="big" />
    	
    	</div>
       
    
    	<table id="anzeigetabelle" border="0" cellpadding="0" cellspacing="0" namo_layoutbox="10,1,0,10,1,0" width="980" height="2330" align="center" bgcolor="#F6F6F6">



        <tr>
        <td width="40" height="90"></td>
            <td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="left" valign="top" colspan="2"><img src="http://www.kreativ-massivhaus.de/referenzen/pic_120/albersweiler_1.jpg" width="120" height="90" border="0" alt="Kreativ Massivhaus Referenzobjekte"></td>
        <td width="30" height="90"></td>
            <td width="120" height="90" align="left" valign="top" namo_textbox="0,0,0,0,0,0,0,0,0,0"><img src="http://www.kreativ-massivhaus.de/referenzen/pic_120/spirkelbach_1.jpg" width="120" height="90" border="0" alt="Kreativ Massivhaus Referenzobjekte"></td>
        <td width="30" height="90"></td>
        <td width="120" height="90" align="left" valign="top" namo_textbox="0,0,0,0,0,0,0,0,0,0"><img src="http://www.kreativ-massivhaus.de/referenzen/pic_120/Steinweiler_Woeschler.jpg" width="120" height="90" border="0" alt="Kreativ Massivhaus Referenzobjekte"></td>

        <td width="30" height="90"></td>
            <td width="120" height="90" align="left" valign="top" namo_textbox="0,0,0,0,0,0,0,0,0,0" colspan="2"><img src="http://www.kreativ-massivhaus.de/referenzen/pic_120/Steinweiler_Machate.jpg" width="120" height="90" border="0" alt="Kreativ Massivhaus Referenzobjekte"></td>
        <td width="20" height="90"></td>
        <td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="left" valign="top" colspan="2"><img src="http://www.kreativ-massivhaus.de/referenzen/pic_120/Steinweiler_Rapp.jpg" width="120" height="90" border="0" alt="Kreativ Massivhaus Referenzobjekte"></td>
        <td width="10" height="90"></td>
        <td width="40" height="90"></td>
        </tr>
        <tr>
        <td width="40" height="30"></td>

            <td width="120" height="30" align="center" valign="middle" namo_textbox="0,0,0,0,0,0,0,0,0,0" colspan="2"><font face="Arial"><span style="font-size:10pt;">Albersweiler</span></font></td>
        <td width="30" height="30"></td>
        <td width="120" height="30" align="center" valign="middle" namo_textbox="0,0,0,0,0,0,0,0,0,0"><font face="Arial"><span style="font-size:10pt;">Spirkelbach</span></font></td>
        <td width="30" height="30"></td>
        <td width="120" height="30" align="center" valign="middle" namo_textbox="0,0,0,0,0,0,0,0,0,0"><font face="Arial"><span style="font-size:10pt;">Steinweiler</span></font></td>
        <td width="30" height="30"></td>
        <td width="120" height="30" align="center" valign="middle" namo_textbox="0,0,0,0,0,0,0,0,0,0" colspan="2"><font face="Arial"><span style="font-size:10pt;">Steinweiler</span></font></td>

        <td width="20" height="30"></td>
        <td width="120" height="30" align="center" valign="middle" namo_textbox="0,0,0,0,0,0,0,0,0,0" colspan="2"><font face="Arial"><span style="font-size:10pt;">Steinweiler</span></font></td>
        <td width="10" height="30"></td>
        <td width="40" height="30"></td>
        </tr>

</table>
   
    </body> 
</html>

Nicht vergessen deiner Tabelle die ID "anzeigetabelle" zu geben und den Code für den Platzhalter einzubauen.

PS: Dein HTML-Code ist der Graus. Würd ich noch etwas überarbeiten. Auch wenns Macromedia vermurkst hat.

flower11 · 16-10-2009, 10:00

Erstmal vieln Dank für deine Mühe;

Das Script funktioniert fast ;in zeile zwei und drei der Bilder
flackern diese wenn ich mit der Maus darüber gehe,
wenn ich nach unten Scrolle zb in Zeile 8 der Bilder ist das Roll
Over Bild gar nich mehr zu sehen da es soweit oben Positioniert wird
und somit abgeschnitten ist........

wenn das noch zu beheben wäre super Script.

PS: der Code ist noch mehr als ein Graus....stammt nicht von mir.

Im Anhang mal ein Teil des Codes dieser ist nich online

Nightflyer · 18-10-2009, 20:16

Zitat:

Zitat von flower11

wenn das noch zu beheben wäre super Script.

Etwas Arbeit musst du schon noch selber machen... Lies in der Doku nach wie man die Scrollhöhe ausliest. Diese musst du dann zu der Positionhöhe dazu addieren.

15-10-2009, 08:56	#1 (permalink)
flower11 Neuer User Registriert seit: Jul 2009 Beiträge: 27	Mit on mouse over die Bildposition bestimmen Hallo; Vielleicht kann mir hier jemand helfen; ich habe ieb fertiges Script verwendet um einen einfachen Bildaustausch zu erzeugen. Mein Problem: ich möchte das Mouse over Bild Positionieren kann ich den Objektstrang : onMouseOver= "document.steinweilerr.src='referenzen/big_400/big_Steinweiler_Rapp.jpg'"; Irgendwie erweitern um dem Bild bestimmte Koordinaten oder eine Bestimmte Position zu geben? <td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="right" valign="top" colspan="2"> <div style="position:absolute; z-index:76;"> <img src="referenzen/pic_120/Steinweiler_Rapp.jpg" name="steinweilerr" onMouseOver= "document.steinweilerr.src='referenzen/big_400/big_Steinweiler_Rapp.jpg'"; onMouseOut="document.steinweilerr.src='referenzen/pic_120/Steinweiler_Rapp.jpg';"> </div> </td> Hoffe es kann mir jemand helfen Vielen Dank

15-10-2009, 09:12	#2 (permalink)
Nightflyer Inventar Registriert seit: Jul 2002 Beiträge: 6.882	Fang mit der Frage nochmals an.. __________________ (\__/) (='.'=) (")_(")

15-10-2009, 09:44	#5 (permalink)
flower11 Neuer User Registriert seit: Jul 2009 Beiträge: 27	Also, der Bildaustausch mit mouseover funktioniert, das Bild das bei mouse over erscheint wird in vergrößereter Darstellung angezeit 400 x 200 px und geht deshalb über den vorgesehenen Layoutramen hinaus. Ich wollte nun wissen ob es eine Möglichkeit gibt das Mouse over Bild so zu positionieren das es im Ramen bleibt. zb. so wie bei der Bildagentur fotolia wenn ich mit der mouse über ein Bild am rechten fahre wird dieses nicht abgeschnitten in der Vergrößerung sondern es wird innerhalb des Layoutramens angezeigt.. Hoffe es wurde verstanden Geändert von flower11 (15-10-2009 um 09:46 Uhr)

15-10-2009, 12:11	#7 (permalink)
flower11 Neuer User Registriert seit: Jul 2009 Beiträge: 27	Danke für deine hilfe, das war es aber leider nicht, als Bbeispiel gebe ich mal die Seite an www.kreativ-massivhaus.de/referenzen.html das ist die Seite aber ohne die Roll over Bilder nur die Bilder in klein Format. An der Seite an der ich gerade Arbeite werden die Bilder bei on mouse Over im Größerer Darstellung angezeigt. wenn ich in td 4 und 5 der mit der Maus über die Bilder gehe stehen die Größeren Bilder über den Layoutrand und ich wollte das diese innerhalb angezeigt werden. Die Tabelle hab ich selbst nicht geschrieben wenn ich zb angebe td align: left zerschägt es bei vergrößerter Darstellung die Tabelle; deshalb habe ich um die Bilder einen Div gelegt mit z index und aboluter position damit die großen Bilder über der Tabelle stehen; nur die vertikale ausrichtung bekomm ich nicht hin.... Ich dachte das geht irgendwie mit Java Hier der code einer zelle: <td width="120" height="90" namo_textbox="0,0,0,0,0,0,0,0,0,0" align="left" valign="top" colspan="2"> <div style="position:absolute; z-index:80"> <img src="referenzen/pic_120/albersweiler_1.jpg" name="irgendeinname" onMouseOver= "document.irgendeinname.src='referenzen/big_400/big_albersweiler_1.jpg'"; onMouseOut="document.irgendeinname.src='referenzen/pic_120/albersweiler_1.jpg';"> </div> </td> Also ich möchte nur das onMouseOver img positionieren Geändert von flower11 (15-10-2009 um 12:13 Uhr)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

15-10-2009, 09:17	#3 (permalink)
flower11 Neuer User Registriert seit: Jul 2009 Beiträge: 27	Sorry; Was meinst Du wurde mein Problem nicht verstanden??

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
startDrag abstand von mouse bestimmen..	mathiregister	Flash Einsteiger	1	29-03-2008 12:01
Bildposition bei dynamischen Bildern	pdorf71	Flash Einsteiger	4	11-04-2007 17:41
Bildposition wandert	zlab	Flash Einsteiger	0	26-01-2007 13:47
bildposition abfragen	seilz2k5	ActionScript 1	2	09-10-2006 16:29
bildposition ändern	letsTANGO	Flash Einsteiger	3	24-04-2006 21:06