Antworten zum Thema „Javascript Grafikslide bei Mousover“

Sling · 08.10.2009

Hey Leute,

ich suche ein script bzw. ein denk anstoss, wo ich anfangen soll, wäre mir lieber.

Ich habe folgende Idee im Kopf stellt euch drei CSS boxen vor die übereinander liegen. in jeder dieser Boxen sind verschiedene Links. Nun möchte ich darüber eine grafik legen die die Links verdeckt und sie erst wenn man mit der Maus drüber geht frei gibt. Mit CSS in diesem sinne Kein thema ich verschiebe die Grafik einfach beim ahover. Sieht aber, seien wir ehrlich bescheiden aus. Ich möchte das sie ganz locker weg Slidet und das ist doch möglich mit Java script oder. Hat jemand von euch da ne Idee oder nen nütlichen Link für mich?

Wäre echt cool Danke euer Sling

feelx75 · 08.10.2009

AW: Javascript Grafikslide bei Mousover

Hi

Ich würde das mit JS - oder besser mit einem JS-Framework, wie jQuery lösen, denn einerseits sind die schon optimiert und andererseits auf verschiedene Browser angepasst, was ziemlich mühsam sein kann.

Habe oben mal die Effects verlinkt. Vielleicht findest du was passendes.

LG

ChrisvA · 08.10.2009

AW: Javascript Grafikslide bei Mousover

Hier habe ich mal eine Link zu einem Code, der schon einmal das verrücken einer Grafik erledigt. Du müsstest nur noch das JS-Event für den Anfang einbauen.

PS: Den Css-Teil würde ich in eine Extra-Datei schreiben, für das kleine Beispiel schien mir das aber überflüssig.

Sling · 08.10.2009

AW: Javascript Grafikslide bei Mousover

Danke euch Leute,

ich werde mir das mal genauer anschauen.
Aber im eifer desgefechts habe ich die Idee im Kopf noch etwas abgewandelt.
Eventuel kann man es auch sio einrichten das man diese "Abdeckungen" die ich erwähnt habe, für die Links, einfach manuel weg schiebt. Problem dabei ist nur wie soll man sie begrenzen das sie wirklich nur in einem bestimmten rahmen zu verschieben sind und wenn ich das Browser Fenster verkleinere das sie auch in Ihrer Position bleiben hater da ne Idee?

Gruß Sling

Zur veranschaulichung hier mla nen kleiner Link

Sry hier noch der Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Krax-design.de</title>

<script type="text/javascript">

</script>


<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body onLoad="draginit()">
<div id="wrapper">
<div onMouseDown="dragstart(this)" style="position:absolute;top:280px;margin-left:auto;margin-right:auto;height:100px;width:100px;background:#ff0000"> </div>
<div onMouseDown="dragstart(this)" style="position:absolute;top:382px;margin-left:auto;margin-right:auto;height:100px;width:100px;background:#00ff00"> </div>
</div>
</body>
</html>

und CSS

@charset "utf-8";
/* CSS Document */

/* =FIXES
---------------------------------------------------------------------------------*/

/* border fix for MAC */
a {outline:0; -moz-outline:0;}

/* =TAGS
---------------------------------------------------------------------------------*/
table{
padding:0 0 0 0;
margin:0 0 0 0;
}

*{
padding: 0;
margin: 0;
border: 0;
}

html {
font-size: 85%;
}

html>body {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

body {
background-image:url(bilder/back.jpg);
background-repeat:repeat-y;
background-position:center;
background-color:#000000;
text-align:center;
behavior: url(csshover.htc);
}

h1{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#333333;
}
/* =DIVBOXEN
---------------------------------------------------------------------------------*/
#wrapper{
width:250px;
height:600px;
margin-left:auto;
margin-right:auto;
margin-top:120px;
background-color:#FFF
}

Sling · 08.10.2009

AW: Javascript Grafikslide bei Mousover

Habe es hin bekommen Jungs.

Hier das ergebniss

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Administration</title>
<script type="text/javascript">
var dragObject, offsetX, offsetY, isDragging=false;
window.onload = init;
document.onmousemove = mM;
document.onmouseup = mU;

function init() {
var ob = document.getElementById("dragObject");

ob.ondrag=function(){return false;};
ob.onselectstart=function(){return false;};

ob.style.left="-15px";
ob.style.top="180px";
ob.style.display="block";
}

function mD(ob,e) {
dragObject = ob;

if (window.event) e=window.event;

var dragX = parseInt(dragObject.style.left);

var mouseX = e.clientX;

offsetX = mouseX - dragX;

isDragging = true;

return false;
}

function mM(e) {
if (!isDragging) return;

if (window.event) e=window.event;

var newX = e.clientX - offsetX;

if(newX > 260)
{
newX = 260;
}

if(newX < -290)
{
newX = -290;
}

dragObject.style.left = newX + "px";

return false;
}

function mU() {
if (!isDragging) return;

isDragging = false;
window.location.href="thumb.php?x="+wertx+"&y="+werty;

return false;
}

function merken() {
return false;
}
</script>
<link href="../style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="dragObject" onmousedown="mD(this,event)">
</div>
</div>
</body>
</html>

CSS

@charset "utf-8";
/* CSS Document */
#dragObject {
width: 280px;
height: 100px;
position: relative;
text-align: center;
display: none;
cursor: default;
background-color:#00F;
}
/* =FIXES
---------------------------------------------------------------------------------*/

/* border fix for MAC */
a {outline:0; -moz-outline:0;}

/* =TAGS
---------------------------------------------------------------------------------*/
table{
padding:0 0 0 0;
margin:0 0 0 0;
}

*{
padding: 0;
margin: 0;
border: 0;
}

html {
font-size: 85%;
}

html>body {
font-size: 12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

body {
background-image:url(bilder/back.jpg);
background-repeat:repeat-y;
background-position:center;
background-color:#000000;
text-align:center;
behavior: url(csshover.htc);
}

h1{
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
color:#333333;
}
/* =DIVBOXEN
---------------------------------------------------------------------------------*/
#wrapper{
width:250px;
height:600px;
margin-left:auto;
margin-right:auto;
margin-top:120px;
background-color:#FFF
}