Anmelden
Donnerstag, 28. Februar 2008, 12:16
Boxover
Hi, ich hoffe hier kann mir einer helfen, ich versuche gerade ein Boxover script (vorgabe) auf ein oder mehrer Bilder auszuüben, nur irgendwie haut das nicht hin.
Mein proplem, ich hab keine Ahnung wo ich das teil einfügen muss.
Angenommen folgendes:
und über das will ich eine Box legen, das mir dann das Vollbild dazu anzeigt , quasi rechts daneben, das eine Gröse von 226x465 pixel hat.
Ich hab hier zwar ein Script, aber mit dem weis ich eigenltich nicht wirklich was ich damit anfangen soll, klar ich muss die Div box um das pic legen aber wie gehts dann weiter, kann mir hier jemand eine genaue erklärung geben, am besten noch mit video Tutorial
Hier mal das Scribt: und auch noch in Englisch
Step 1
Include the folllowing somewhere in the HTML of your page
Step 2
Next, go to the code for the HTML element you would like the tooltip to appear over.
For instance, imagine we had the following "div" in our HTML document.
BoxOver is configured through the "title" attribute of HTML elements.
To make a tooltip appear over the "div" above we alter the code as follows:
Please helb
PS: ganz vergessen die boxover.js einzufügen:
Mein proplem, ich hab keine Ahnung wo ich das teil einfügen muss.
Angenommen folgendes:
|
Quellcode |
1 |
<img src="png/pix/test.png" alt="" name="" width="40" height="40" border="0" id="Image1" /> |
und über das will ich eine Box legen, das mir dann das Vollbild dazu anzeigt , quasi rechts daneben, das eine Gröse von 226x465 pixel hat.
Ich hab hier zwar ein Script, aber mit dem weis ich eigenltich nicht wirklich was ich damit anfangen soll, klar ich muss die Div box um das pic legen aber wie gehts dann weiter, kann mir hier jemand eine genaue erklärung geben, am besten noch mit video Tutorial
Hier mal das Scribt: und auch noch in Englisch
Step 1
Include the folllowing somewhere in the HTML of your page
|
|
Quellcode |
1 |
<SCRIPT SRC="BoxOver.js"></SCRIPT> |
Step 2
Next, go to the code for the HTML element you would like the tooltip to appear over.
For instance, imagine we had the following "div" in our HTML document.
|
|
Quellcode |
1 2 3 |
<DIV style="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px"> My div with some text inside<<<oder mus ich hier die image einfügen?>>> </DIV> |
BoxOver is configured through the "title" attribute of HTML elements.
To make a tooltip appear over the "div" above we alter the code as follows:
|
|
Quellcode |
1 2 3 |
<DIV TITLE="header=[header text] body=[body text]" STYLE="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 75px"> My div with some text inside. Move over me to see my tooltip. </DIV> |
Please helb
PS: ganz vergessen die boxover.js einzufügen:
|
|
Quellcode |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 |
if (typeof document.attachEvent!='undefined') {
window.attachEvent('onload',init);
document.attachEvent('onmousemove',moveMouse);
document.attachEvent('onclick',checkMove); }
else {
window.addEventListener('load',init,false);
document.addEventListener('mousemove',moveMouse,false);
document.addEventListener('click',checkMove,false);
}
var oDv=document.createElement("div");
var dvHdr=document.createElement("div");
var dvBdy=document.createElement("div");
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;
boxOpen=false;
ox=10;
oy=10;
lockX=0;
lockY=0;
function init() {
oDv.appendChild(dvHdr);
oDv.appendChild(dvBdy);
oDv.style.position="absolute";
oDv.style.visibility='hidden';
document.body.appendChild(oDv);
}
function defHdrStyle() {
dvHdr.innerHTML='<img style="vertical-align:middle" src="info.gif"> '+dvHdr.innerHTML;
dvHdr.style.fontWeight='bold';
dvHdr.style.width='150px';
dvHdr.style.fontFamily='arial';
dvHdr.style.border='1px solid #A5CFE9';
dvHdr.style.padding='3';
dvHdr.style.fontSize='11';
dvHdr.style.color='#4B7A98';
dvHdr.style.background='#D5EBF9';
dvHdr.style.filter='alpha(opacity=85)'; // IE
dvHdr.style.opacity='0.85'; // FF
}
function defBdyStyle() {
dvBdy.style.borderBottom='1px solid #A5CFE9';
dvBdy.style.borderLeft='1px solid #A5CFE9';
dvBdy.style.borderRight='1px solid #A5CFE9';
dvBdy.style.width='150px';
dvBdy.style.fontFamily='arial';
dvBdy.style.fontSize='11';
dvBdy.style.padding='3';
dvBdy.style.color='#1B4966';
dvBdy.style.background='#FFFFFF';
dvBdy.style.filter='alpha(opacity=85)'; // IE
dvBdy.style.opacity='0.85'; // FF
}
function checkElemBO(txt) {
if (!txt || typeof(txt) != 'string') return false;
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1))
return true;
else
return false;
}
function scanBO(curNode) {
if (checkElemBO(curNode.title)) {
curNode.boHDR=getParam('header',curNode.title);
curNode.boBDY=getParam('body',curNode.title);
curNode.boCSSBDY=getParam('cssbody',curNode.title);
curNode.boCSSHDR=getParam('cssheader',curNode.title);
curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;
curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));
curNode.fixY=parseInt(getParam('fixedrely',curNode.title));
curNode.absX=parseInt(getParam('fixedabsx',curNode.title));
curNode.absY=parseInt(getParam('fixedabsy',curNode.title));
curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;
curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;
curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;
curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;
curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;
if (getParam('requireclick',curNode.title)=='on') {
curNode.requireclick=true;
document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
}
else {// Note : if requireclick is on the stop clicks are ignored
if (getParam('doubleclickstop',curNode.title)!='off') {
document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
}
if (getParam('singleclickstop',curNode.title)=='on') {
document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
}
}
curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;
curNode.title='';
curNode.hasbox=1;
}
else
curNode.hasbox=2;
}
function getParam(param,list) {
var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
var res = reg.exec(list);
var returnvar;
if(res)
return res[2].replace('[[','[').replace(']]',']');
else
return '';
}
function Left(elem){
var x=0;
if (elem.calcLeft)
return elem.calcLeft;
var oElem=elem;
while(elem){
if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderLeftWidth);
x+=elem.offsetLeft;
elem=elem.offsetParent;
}
oElem.calcLeft=x;
return x;
}
function Top(elem){
var x=0;
if (elem.calcTop)
return elem.calcTop;
var oElem=elem;
while(elem){
if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
x+=parseInt(elem.currentStyle.borderTopWidth);
x+=elem.offsetTop;
elem=elem.offsetParent;
}
oElem.calcTop=x;
return x;
}
var ah,ab;
function applyStyles() {
if(ab)
oDv.removeChild(dvBdy);
if (ah)
oDv.removeChild(dvHdr);
dvHdr=document.createElement("div");
dvBdy=document.createElement("div");
CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
dvHdr.innerHTML=CBE.boHDR;
dvBdy.innerHTML=CBE.boBDY;
ah=false;
ab=false;
if (CBE.boHDR!='') {
oDv.appendChild(dvHdr);
ah=true;
}
if (CBE.boBDY!=''){
oDv.appendChild(dvBdy);
ab=true;
}
}
var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
var ini=false;
// Customised function for inner window dimension
function SHW() {
if (document.body && (document.body.clientWidth !=0)) {
width=document.body.clientWidth;
height=document.body.clientHeight;
}
if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}
return [width,height];
}
var ID=null;
function moveMouse(e) {
//boxMove=true;
e?evt=e:evt=event;
CSE=evt.target?evt.target:evt.srcElement;
if (!CSE.hasbox) {
// Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement
iElem=CSE;
while ((iElem.parentNode) && (!iElem.hasbox)) {
scanBO(iElem);
iElem=iElem.parentNode;
}
}
if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){
if (!CSE.boxItem) {
iterElem=CSE;
while ((iterElem.hasbox==2)&&(iterElem.parentNode))
iterElem=iterElem.parentNode;
CSE.boxItem=iterElem;
}
iterElem=CSE.boxItem;
if (CSE.boxItem&&(CSE.boxItem.hasbox==1)) {
LBE=CBE;
CBE=iterElem;
if (CBE!=LBE) {
applyStyles();
if (!CBE.requireclick)
if (CBE.fade) {
if (ID!=null)
clearTimeout(ID);
ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
}
else {
if (ID!=null)
clearTimeout(ID);
COL=1;
ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);
}
if (CBE.IEbugfix) {hideSelects();}
fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;
fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;
lockX=0;
lockY=0;
boxMove=true;
ox=CBE.offX?CBE.offX:10;
oy=CBE.offY?CBE.offY:10;
}
}
else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove)) {
// The conditional here fixes flickering between tables cells.
if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {
CBE=null;
if (ID!=null)
clearTimeout(ID);
fadeOut();
showSelects();
}
}
LSE=CSE;
}
else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {
totalScrollLeft=0;
totalScrollTop=0;
iterElem=CSE;
while(iterElem) {
if(!isNaN(parseInt(iterElem.scrollTop)))
totalScrollTop+=parseInt(iterElem.scrollTop);
if(!isNaN(parseInt(iterElem.scrollLeft)))
totalScrollLeft+=parseInt(iterElem.scrollLeft);
iterElem=iterElem.parentNode;
}
if (CBE!=null) {
boxLeft=Left(CBE)-totalScrollLeft;
boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft;
boxTop=Top(CBE)-totalScrollTop;
boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop;
doCheck();
}
}
if (boxMove&&CBE) {
// This added to alleviate bug in IE6 w.r.t DOCTYPE
bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft;
mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop;
if ((CBE)&&(CBE.windowLock)) {
mouseY < -oy?lockY=-mouseY-oy:lockY=0;
mouseX < -ox?lockX=-mouseX-ox:lockX=0;
mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;
mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;
}
oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px";
oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";
}
}
function doCheck() {
if ( (mouseX < boxLeft) || (mouseX >boxRight) || (mouseY < boxTop) || (mouseY > boxBottom)) {
if (!CBE.requireclick)
fadeOut();
if (CBE.IEbugfix) {showSelects();}
CBE=null;
}
}
function pauseBox(e) {
e?evt=e:evt=event;
boxMove=false;
evt.cancelBubble=true;
}
function showHideBox(e) {
oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';
}
function hideBox(e) {
oDv.style.visibility='hidden';
}
var COL=0;
var stopfade=false;
function fadeIn(fs) {
ID=null;
COL=0;
oDv.style.visibility='visible';
fadeIn2(fs);
}
function fadeIn2(fs) {
COL=COL+fs;
COL=(COL>1)?1:COL;
oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';
oDv.style.opacity=COL;
if (COL<1)
setTimeout("fadeIn2("+fs+")",20);
}
function fadeOut() {
oDv.style.visibility='hidden';
}
function isChild(s,d) {
while(s) {
if (s==d)
return true;
s=s.parentNode;
}
return false;
}
var cSrc;
function checkMove(e) {
e?evt=e:evt=event;
cSrc=evt.target?evt.target:evt.srcElement;
if ((!boxMove)&&(!isChild(cSrc,oDv))) {
fadeOut();
if (CBE&&CBE.IEbugfix) {showSelects();}
boxMove=true;
CBE=null;
}
}
function showSelects(){
var elements = document.getElementsByTagName("select");
for (i=0;i< elements.length;i++){
elements[i].style.visibility='visible';
}
}
function hideSelects(){
var elements = document.getElementsByTagName("select");
for (i=0;i< elements.length;i++){
elements[i].style.visibility='hidden';
}
}
|
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Samsonetty« (28. Februar 2008, 13:10)
Donnerstag, 28. Februar 2008, 18:38
Mein Gott wie kompliziert.
Die Funktion (JS):
Die Tabellenreihe ruft beim Mouseover ein Bild auf:
Beispiel einer alten Sandbox: http://www.superlevermann.de/site1/index.php?go=referenzen
Die Funktion (JS):
|
|
Quellcode |
1 2 3 4 5 |
function inf(text){
var container;
container = document.getElementById('info');
container.innerHTML = text;
}
|
Die Tabellenreihe ruft beim Mouseover ein Bild auf:
|
|
Quellcode |
1 2 3 4 5 |
...
<tr onMouseout="inf('');" onMouseover="inf('<b>Vorschau</b><br><img src=deine grafik.png>');"></tr
.....
<div id="info" class="linkinfo"></div>
....
|
Beispiel einer alten Sandbox: http://www.superlevermann.de/site1/index.php?go=referenzen
Freitag, 29. Februar 2008, 16:53
ja wie kompliziert
Ich brauch das nicht als Text sondern als Bild austausch!So wie ich es oben beschrieben habe.
Bild a mit einem mas von 40x40 und wenn man darüber geht, erscheint das orginal bild von 226x400.
Diese version aber ist nur text und Bild
(benant nach box.js)
und selbst wenn ich das bild einfüge bei Vorschau, geht es nicht, da er mir dann gleich die große image anzeigt.
Also nicht text bild sondern bild bild.
danke
Bild a mit einem mas von 40x40 und wenn man darüber geht, erscheint das orginal bild von 226x400.
Diese version aber ist nur text und Bild
(benant nach box.js)
|
|
Quellcode |
1 2 3 4 5 |
function inf(text){
var container;
container = document.getElementById('info');
container.innerHTML = text;
}
|
|
|
Quellcode |
1 2 3 4 5 6 |
<SCRIPT SRC="Box.js"></SCRIPT>
...
<tr onMouseout="inf('');" onMouseover="inf('<b>Vorschau</b><br><img src=deine grafik.png>');"></tr
.....
<div id="info" class="linkinfo"></div>
....
|
und selbst wenn ich das bild einfüge bei Vorschau, geht es nicht, da er mir dann gleich die große image anzeigt.
Also nicht text bild sondern bild bild.
danke
ist gerade angekommen
Freitag, 29. Februar 2008, 21:53
Sag mal hat bei euch auch der Virenwarner bei betreten der Seite angeschlagen? Möchte jetzt nicht Panik verbreiten, aber Lokal ist mein Rechner sauber und mein Antivir hat einen HTML-Scriptvirus und einen Trojaner bei betreten der Seite geblockt . Vielleicht kann einer der Admins hier mal über den Quelltext von http://www.werk7-gaming.de/ schauen.
. Vielleicht kann einer der Admins hier mal über den Quelltext von http://www.werk7-gaming.de/ schauen.
Freitag, 29. Februar 2008, 22:23
Jepp, deine Seite ist verseucht / ss wurden Scripte hochgeladen.Sag mal hat bei euch auch der Virenwarner bei betreten der Seite angeschlagen? Möchte jetzt nicht Panik verbreiten, aber Lokal ist mein Rechner sauber und mein Antivir hat einen HTML-Scriptvirus und einen Trojaner bei betreten der Seite geblockt
Aber was hat das hier zu suchen?
Samstag, 1. März 2008, 03:24
Boxover
Komisch, bei mir funzt es 100%.
http://www.superlevermann.de/scripte/boxover.htm
Wunderbar, das ist es, wenn du mir jetzt noch sagst wie ich das in einer Grafik verwende :-) dann ist alles in Butter
Die Programme die ich verwende sind Dreamweaver und Fireworks, also muss doch eine Möglichkeit geben, das ich in einer Grafik, eine Tabelle einfüge und dort den code anwenden kann, oder muss ich es anders rum machen, ich bin zwar schon ganz schön eingearbeitet in den 2 teilen, aber man lernt nie aus, kennst es ja
das ist die Grafik die ich meine
Hat sich erledigt, ich habs gefunden, das ist ja mal der Hammer, also für alle die es nicht wissen, Importieren, HTML code auswählen und einfügen, oder segment einfügen, ändern auf Grafik, und dann den code einfügen....
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Samsonetty« (1. März 2008, 03:42)
- 1
- 2
