Anzeige:
Ergebnis 1 bis 11 von 11

Thema: Teile eines Schwarzweis Bildes farblich hervorheben durch mouseover?

  1. #1
    Registrierter Benutzer
    Registriert seit
    31.03.2002
    Ort
    Hamburg
    Beiträge
    201

    Teile eines Schwarzweis Bildes farblich hervorheben durch mouseover?

    Hallo,

    Welches ist das beste System, einzelne Teile eines Schwarz/Weis Bildes bei Mouseover farblich hervorzuheben?

    Infrage kommt ja theoretisch,

    css,
    java,
    flash

    wobei mir flash nicht wirklich gefällt.
    ich bastel grad an einer besseren signatur ;)

  2. #2
    Registrierter Benutzer
    Registriert seit
    22.08.2002
    Ort
    Nürnberg
    Beiträge
    638
    Hi,

    da gibt es irgendwo im Netz ein geniales Beispiel wie man es mit CSS machen kann. Ich war gerade bestimmt eine halbe Stunde unterwegs, habe es aber leider nicht mehr gefunden.

    Prinzipiell ist es aber so, dass eine Linkliste innerhalb einer Box (z.B. div's) erstellt wird. Der Box und den Links wird jeweils ein Bild zu gewissen, wobei die Box z.B. das farbige Bild ist und die Links zusammengesetzt das Bild in s/w sind, überlagert. Wenn man jetzt über einen der Links geht, wird das jeweilige Bild auf durchsichtig gesetzt.

    Nur mal so als Tip.

    Pingu

  3. #3
    Registrierter Benutzer Avatar von peschmae
    Registriert seit
    14.03.2002
    Ort
    Schweizland
    Beiträge
    4.549
    CSS ist sicher die beste weil allgemeinste Lösung, wenn dus hinkriegst. Nicht jeder hat Java und bei vielen hat es recht lang zum starten.
    Deshalb mag ich Seiten nicht, bei denen das Applet nur so n bisschen Layout oder so ist. Ein Applet sollte für mich der Grund sein, wieso ich eine Seite besuche - nicht einfach Darstellungshilfe.

    MfG Peschmä
    The greatest trick the Devil ever pulled was convincing the world he didn't exist. -- The Usual Suspects (1995)
    Hey, I feel their pain. It's irritating as hell when people act like they have rights. The great old one (2006)

  4. #4
    Registrierter Benutzer
    Registriert seit
    20.07.2001
    Beiträge
    144
    Willst du die Farbe in einem Bild ändern oder das Bild austauschen?

    Für eine Mouseover-Effekt ist Flash sicherlich überdimensioniert. Willst du aber interaktive Effekte ins Bild packen (z.B. kann Teile vom Bild verschieben) ist dies sehr einfach mit Flash realisierbar. Du kannst dann immer noch abfragen ob Flash vorhanden ist und alternativ CSS verwenden.

    Für einen Mouseover-Effekt ist auch noch Javascript denkbar.

    Offe

  5. #5
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Möglichkeit 1:
    Die Links (Betonsockel,Gitterzaum) plazierst du über deinem Bild.
    setmarkerto(75,130,270,175) mußt du auf die Stelle setzen, die aufleuchten soll.

    Code:
    <HTML><HEAD><TITLE>Hervorhebung</TITLE>
    <LINK href="style.css" type=text/css rel=STYLESHEET>
    </HEAD>
    <BODY onload=initiate()>
    
    <SCRIPT language=javaScript>
    <!-- Beginning of JavaScript -
    
    var imgurl="../pics/zaun0.jpg"
    
    // horizontal position of the image (distance to the left margin of the window, pixels)
    var x_imgposition=270
    
    // vertical position of the image (distance to the top margin of the window, pixels)
    var y_imgposition=150
    
    // maximum width of the animated border
    var maxborderwidth=4
    
    // color of the animated border
    var border_color="#DD7427"
    
    // speed of the marker-animation. A higher value will slow down the animation
    var speed=100
    
    // do not edit the variables below
    var preloadimgurl=new Image()
    preloadimgurl.src=imgurl
    var clipleft,clipright,cliptop,clipbottom,x_marker,y_marker,tableheight,tablewidth,timer,contentmarker
    var borderwidth=0
    var step=1
    var marker_is_on=false
    var isloaded=false
    
    function initiate() {
    	if(document.all) {
    		yourimage.innerHTML="<img src="+imgurl+">"
    		document.all.yourimage.style.posLeft=x_imgposition
    		document.all.yourimage.style.posTop=y_imgposition	
    		isloaded=true
    	}
    	if(document.layers) {
    		document.yourimage.document.write("<img src="+imgurl+">")
    		document.yourimage.document.close()
    		document.yourimage.left=x_imgposition
    		document.yourimage.top=y_imgposition
    		isloaded=true
    	}
    }
    
    function setmarkerto(clpleft,clptop,clpright,clpbottom) {
        marker_is_on=true
    	clipleft=eval(clpleft)
    	clipright=eval(clpright)
    	cliptop=eval(clptop)
    	clipbottom=eval(clpbottom)
    	tablewidth=clipright-clipleft
    	tableheight=clipbottom-cliptop
    	x_marker=eval(x_imgposition)+eval(clipleft)
    	y_marker=eval(y_imgposition)+eval(cliptop)	
    	if(document.all && isloaded) {
    		document.all.marker.style.posLeft=x_marker
    		document.all.marker.style.posTop=y_marker	
    		animatemarker()
    	}
    	if(document.layers && isloaded) {
    		document.marker.left=x_marker
    		document.marker.top=y_marker
    		animatemarker()
    	}
    }
    
    function animatemarker() {
        if (marker_is_on) {
    	    getcontentmarker()
    	    borderwidth+=step
    	    if (borderwidth>maxborderwidth) {step=step*(-1)}
    	    else if (borderwidth<0) {borderwidth=step=step*(-1)}
    	    if(document.all) {
    		    marker.innerHTML=contentmarker
                document.all.marker.style.visibility="visible"
    		    timer=setTimeout("animatemarker()",speed)
    	    }
    	    if(document.layers) {
    		    document.marker.document.write(contentmarker)
    		    document.marker.document.close()
                document.marker.visibility="visible"
    		    timer=setTimeout("animatemarker()",speed)
    	    }
       }
       else {
            clearTimeout(timer)
       }
    }
    
    function hidemarker() {
        marker_is_on=false
        if (document.all) {
            document.all.marker.style.visibility="hidden"
        }
        if (document.layers) {
            document.marker.visibility="hidden"
        }
    }
    function getcontentmarker() {
    		contentmarker="<table cellpadding=0 cellspacing=0 width="+tablewidth+" height="+tableheight+" border="+borderwidth+" bordercolor="+border_color+"><tr><td>&nbsp;</td></tr></table>"	
    }
    
    // - End of JavaScript - -->
    </SCRIPT>
    
    <DIV id=yourimage style="Z-INDEX: 1; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
    <DIV id=marker style="Z-INDEX: 2; LEFT: 0px; POSITION: absolute; TOP: 0px"></DIV>
    
    <A onmouseover=setmarkerto(75,130,270,175) onmouseout=hidemarker() href="#">Betonsockel</A>
    <A onmouseover=setmarkerto(120,58,270,153) onmouseout=hidemarker() href="#">Gitterzäune</A> 
    <A onmouseover=setmarkerto(0,48,130,150) onmouseout=hidemarker() href="#">Zäune</A> 
    
    </BODY>
    </HTML>

  6. #6
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Möglichkeit 2:
    Wenn man Lust hat kann man die Links und die Boxen mit einer Datenbank erzeugen.
    http://lkrtest.bndlg.de/landkreis/la...nen/index.php/
    http://www.cross-browser.com
    Den ersten Link kann man transparent machen.

    PHP-Code:
    <HTML><HEAD><TITLE>Link</TITLE>
       <
    script type='text/javascript' src='cbe/cbe_core.js'></script>   
       <script type='text/javascript' src='cbe/cbe_slide.js'></script>
       <script type='text/javascript' src='cbe/cbe_slide2.js'></script>
       <script type='text/javascript' src='cbe/cbe_event.js'></script>

    <style>
    .content {
      position: absolute; visibility:hidden;
      left:100px; top:120px;
      width: 20px; height: 20;   
      background:red; layer-background-color:red;
    }
    .Links {
      position: absolute;visibility:hidden;
      left:200px; top:220px;
      width: 20px; height: 20;   
      background:green; layer-background-color:green;
    }
    </style>

    <script type='text/javascript'>
    <!--
    var content,Links;

    function windowOnload() {init()};

    function init(){ 
     with (content = cbeGetElementById('content').cbe) {
            resizeTo(20,20);
            moveTo(100,120);
            show();        
            } 

     with (Links = cbeGetElementById('Links').cbe) {
            zIndex(200);
            resizeTo(20,20);
            moveTo(200,220);
            hide();        
            } 
    }

    function zeig(cbe) {
      document.getElementById(cbe).cbe.show();  
    }
    function versteck(cbe) {
      document.getElementById(cbe).cbe.hide();
    }
    </script>
    </head>

    <body>

    <IMG SRC = "umrisskarte.gif" WIDTH = "500" HEIGHT ="412" BORDER="0">     
    <div id="content" class="content"> 
      <a href="mylink" target='top' onMouseOver="javascript:zeig('Links')";
                                    onMouseOut="javascript:versteck('Links')"; >
                     <IMG SRC = "red.gif" width = "20" height ="20" border="0"></a>
    </div>


    <div id="Links" class="Links"> 
           <IMG SRC = "green.gif" width = "20" height ="20" border="0">
    </div>
    </BODY>
    </HTML> 

  7. #7
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Möglichkeit 3:
    Code:
    <HTML><HEAD><TITLE>Link</TITLE>
       <script type='text/javascript' src='cbe/cbe_core.js'></script>   
       <script type='text/javascript' src='cbe/cbe_slide.js'></script>
       <script type='text/javascript' src='cbe/cbe_slide2.js'></script>
       <script type='text/javascript' src='cbe/cbe_event.js'></script>
    
    <style>
    .Links {
      position: absolute;visibility:hidden;
      left:200px; top:220px;
      width: 20px; height: 20;   
      background:green; layer-background-color:green;
    }
    </style>
    
    <script type='text/javascript'>
    <!--
    var Links;
    
    function windowOnload() {init()};
    
    function init(){  
     with (Links = cbeGetElementById('Links').cbe) {
            zIndex(200);
            resizeTo(20,20);
            moveTo(200,220);
            hide();        
            } 
    }
    
    function zeig(cbe) {
      document.getElementById(cbe).cbe.show();  
    }
    function versteck(cbe) {
      document.getElementById(cbe).cbe.hide();
    }
    </script>
    </head>
    
    <body>
    <IMG SRC = "umrisskarte.gif" WIDTH = "500" HEIGHT ="412" BORDER="0" USEMAP="#map">
    
    <MAP NAME ="map">
    <AREA SHAPE="RECT" COORDS="4,106,92,133" HREF="Zöschingen"
          onMouseOver="javascript:zeig('Links')";
          onMouseOut="javascript:versteck('Links')"; >
    </map>
    
    <div id="Links" class="Links"> 
           <IMG SRC = "green.gif" width = "20" height ="20" border="0">
    </div>
    </BODY>
    </HTML>

  8. #8
    Registrierter Benutzer
    Registriert seit
    20.07.2001
    Beiträge
    144
    ohne Javascript mit CSS:

    Buttons mit Bildern

    interessant aber nur für IE:
    filter:Gray()

    Offe
    Geändert von offe (14-12-2003 um 21:38 Uhr)

  9. #9
    Registrierter Benutzer
    Registriert seit
    31.03.2002
    Ort
    Hamburg
    Beiträge
    201
    @ Offe,

    es geht ja darum das es ein Komplexes Bild ist. Also ein Gruppen Bild mit 30 Leuten. Dementsprechend ein Riesenaufwand und ich weis nicht ob das mit dem css so funktioniert.
    ich bastel grad an einer besseren signatur ;)

  10. #10
    Registrierter Benutzer
    Registriert seit
    27.08.2002
    Beiträge
    337
    Es funktioniert mit CSS in den neuen Browsern ganz gut.
    NS4 steigt dagegen aus.
    Aber für diesen Effekt gibt es noch ein paar Möglichkeiten der Realisierung.

  11. #11
    Registrierter Benutzer
    Registriert seit
    06.11.2003
    Ort
    Byreuth
    Beiträge
    50
    bei css ist halt das problem, dass es nicht jeder browser kann bzw nicht richtig kann! allerdings denke ich, dass es auch mit hotspots gehen müsste, also dass man bestimmte bereiche eines bildes mit kreisen, rechtecken und so beschreibt und dann ein kleines rolloverscript schreibt!! das dürfte eigentlich kein problem sein, jedoch würde ich dafür ein programm wie golive benutzen, da man die koordinaten bestimmen muss, was mit dem editor nicht so leicht ist/wäre!!

    johnpatcher
    ich liebe linux

Lesezeichen

Berechtigungen

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