hover efekt plasseres til høyere

lilfire · 14. juni 2008

bruker ferdig scriptet JV2 Folder Gallery til galleri på siden min men sliter med at hover efekten kommer langt ut til høyere. har lest gjenom kodene men ikke funnet det som fikset saken. siden scriptet bruker mye include er det litt vanskelig å vite hvilken fil jeg skal se i heller. men her er hvertfall kodene som nettleseren leser til slutt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>

<link rel="stylesheet" type="text/css" href="layout.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Lilfire.net</title>

<!-- JV2 Folder Gallery (header) -->
<link rel="stylesheet" type="text/css" href="layout.css">
<!--[if IE]>
<style type="text/css" media="screen">
body{behavior:url(gallery/include/csshover.htc);}
#menu ul li{float:left;height:1%;}
#menu ul li a{height:1%;}
</style>
<![endif]-->
<!-- JV2 Folder Gallery (header) -->


</head>


<body>
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
newwindow=window.open(url,'name');
if (window.focus) {newwindow.focus()}
return false;
}

// -->
</script>

<div id=wrap>
<div id=header>
<h1>Lilfire</h1>
</div>
<div id=meny>
<ul>
<li><a href="index.php?side=hjem">Hjem</a></li>
<li><a href="index.php?side=hendelser">Hendelser</a></li>

<li><a href="index.php?side=galleri">Galleri</a></li>
<li><a href="index.php?side=tjenester">Tjenester</a></li>
<li><a href="index.php?side=forum">Forum</a></li>
<li><a href="index.php?side=logg">Logg</a></li>
<li style="border-style: solid;	border-width: 0px; border-bottom-width: 1px; border-left-width: 1px; border-top-width: 1px; border-color: red;"><a href="index.php?side=admin">Admin</a></li>
</ul>
</div>
<div id=side>
<ul id=sti>
<li><a href="index.php?side=hjem">Forside</a></li>
<li>- <a href="index.php?side=galleri">Galleri</a></li>

</ul>
<div id=galeri>
<!-- JV2 Folder Gallery -->

<span class="gallerymenu">Album: <a href="/index.php?side=galleri&amp">Galleri</a></span><hr>


<script type="text/javascript">
/* <![CDATA[ */

// Variable declarations
var x = 0,	// y coordinate
y = 0; 	// x coordinate
// ends varaiable declarations

// check if browser doesnt supports document.all
// capute mouse movement if document.all is not supported.
if( !document.all )
{
document.captureEvents(Event.MOUSEMOVE)
} //-- ends if statement

// regester event listner for mouse move
// with function setCoordinates
window.document.onmousemove = setCoordinates;

// function to obtain mouse coordinates
function setCoordinates( e )
{
// if browser supports document.all such as IE or opera.
if( document.all )
{
	x = window.event.clientX;
	y = window.event.clientY;
}
else
{
	x = e.pageX;
	y = e.pageY;
}
} // ends function setCoordinates.

/* Function to display the tooltip
@param: element => reference to the caller
@param: title => tooltip title...optional
@param: msg => tooltip message or body
*/
function toolTip( element, title, msg )
{
// create a div element
var el = window.document.createElement( "div" );

// check if title has been supplied.
if( title.length > 0 )
{
	var head = window.document.createElement( "h1" );
	head.innerHTML = title;
	el.appendChild( head );
} //-- ends if statement

// create a paragraph element
var para = window.document.createElement( "P" );
para.innerHTML = msg;
el.appendChild( para );
// style div element
el.style.left = x + "px";
el.style.top = y + 10 + "px";
el.style.display = "block";

// check if browser if IE or opera and append class name
if ( document.all ) el.className = "tips";
else el.setAttribute( "class", "tips" );

for( var i=0; i<element.parentNode.childNodes.length; i++ )
{
	if( element.parentNode.childNodes[ i ].className == "tips" )
	{
		element.parentNode.removeChild( element.parentNode.childNodes[ i ] );
	}
}

element.parentNode.appendChild( el );

} // ends function toolTip

function removeTip( element )
{
for( var i = 0; i < element.parentNode.childNodes.length; i++  )
{
	if( element.parentNode.childNodes[ i ].className == "tips" )
		element.parentNode.removeChild( element.parentNode.childNodes[ i ] );
} // ends for
} // ends removeTip

/* ]]> */
</script>

<table id= "gallery" border="0" cellspacing="2" ><tr><td height='100%' align='center' valign='top' class='table_cell_folder'><a onmousemove="java script:toolTip( this, 'Publisert', 'Bilder som er lastet opp av brukere.' );"	onmouseout="java script: removeTip( this );" href='/index.php?side=galleri&category=Publisert'><img class='galleryimage' border='0' src='gallery/thumbcache/thumb_87bd4ab148dc46b3528767578e7d8ab7.jpg' alt='' height='105' width='140' /></a><br /><span class='imagetitle'>Publisert (4)</span></td><td height='100%' align='center' valign='top' class='table_cell_folder'><a href='/index.php?side=galleri&category=TG08'><img class='galleryfolder' border='0' src='gallery/theme/DEFAULT_ICONS/folder.gif' alt=''  /></a><br /><span class='imagetitle'>TG08<br />(3 album)</span></td><td height='100%' align='center' valign='top' class='table_cell_folder'><a href='/index.php?side=galleri&category=babes'><img class='galleryimage' border='0' src='gallery/thumbcache/thumb_984e2b342ccada5316b54dfb39870161.jpg' alt='' height='105' width='140' /></a><br /><span class='imagetitle'>babes (518)</span></td></tr><tr><td height='100%' align='center' valign='top' class='table_cell_folder'><a href='/index.php?side=galleri&category=biler'><img class='galleryimage' border='0' src='gallery/thumbcache/thumb_a24dfae6da71a7677cb8718ab546cb20.jpg' alt='' height='105' width='140' /></a><br /><span class='imagetitle'>biler (71)</span></td><td height='100%' align='center' valign='top' class='table_cell_folder'><a href='/index.php?side=galleri&category=mil'><img class='galleryimage' border='0' src='gallery/thumbcache/thumb_fcf2a1621d218307e2f6d5f0ba1fed3b.jpg' alt='' height='105' width='78' /></a><br /><span class='imagetitle'>mil (1556)</span></td><td height='100%' align='center' valign='top' class='table_cell_folder'><a href='/index.php?side=galleri&category=party'><img class='galleryfolder' border='0' src='gallery/theme/DEFAULT_ICONS/folder.gif' alt=''  /></a><br /><span class='imagetitle'>party<br />(2 album)</span></td></tr><tr></tr></table><div class="gallerypagelinks"></div><div style="display:none;">JV2 Folder Gallery</div>

<!-- JV2 Folder Gallery -->
</div>
<div id=hoyeremeny>
<li style="border-style: solid;	border-width: 0px; border-bottom-width: 1px; border-right-width: 1px; border-top-width: 1px; border-color: red;"><a href="index.php?side=upload">Last opp bilder</a></li>
</div>
</div>
</div>
</body>
</html>

og siden finnes her(er kun publisert som har denne efekten enda)

skulle ønske at mouseover efekten kom mer under musa ikke så langt til høyere.

mvh

lilfire

Stian89 · 16. juni 2008

Er nok ikke så mange som orker å gå gjennom hele den klysa der. Du gjør nok ting på en veldig tungvindt og uoversiktelig måte.

For å gi deg et eksempel på hva jeg mener, se her. Du kan oppnå samme resultat på 2-3 linjer html og css, istedet for "tusenvis" av linjer med det scriptet der, og siden det er så mye mer oversiktelig blir det desto enklere å style det akkurat slik du vil at det skal se ut.

Dryper · 16. juni 2008

Er nok ikke så mange som orker å gå gjennom hele den klysa der. Du gjør nok ting på en veldig tungvindt og uoversiktelig måte.

For å gi deg et eksempel på hva jeg mener, se her. Du kan oppnå samme resultat på 2-3 linjer html og css, istedet for "tusenvis" av linjer med det scriptet der, og siden det er så mye mer oversiktelig blir det desto enklere å style det akkurat slik du vil at det skal se ut.

Er det mulig å få disse linjene ? :innocent:

Stian89 · 16. juni 2008

Du klarer ikke sjekke kildekoden på et dokument?

Dryper · 17. juni 2008

Du klarer ikke sjekke kildekoden på et dokument?

He jo er vant med PHP, noe som ikke vises i min kildekode vertfall (Mozilla )

lilfire · 17. juni 2008

er jo mange sider kode i selve galleriet.

hele galleriet er gratis og kan lastes ned herfra:

http://www.jv2design.com/Downloads/

Dryper · 17. juni 2008

Er nok ikke så mange som orker å gå gjennom hele den klysa der. Du gjør nok ting på en veldig tungvindt og uoversiktelig måte.

For å gi deg et eksempel på hva jeg mener, se her. Du kan oppnå samme resultat på 2-3 linjer html og css, istedet for "tusenvis" av linjer med det scriptet der, og siden det er så mye mer oversiktelig blir det desto enklere å style det akkurat slik du vil at det skal se ut.

Jeg har nå tutla litt på med disse linjene og lurte på om du vet om det er mulig å legge til en slags FADE effekt uten JS.

Edit: Leif

Endret 17. juni 2008 av Dryper

Stian89 · 17. juni 2008

Hmm. Om man kan få til noe sånt med bare css vet jeg helt ærlig ikke.

Kan hende, men ligger utenfor min kunnskap. :thumbdown:

Dryper · 17. juni 2008

nja det gjør ingenting får ta fremm søkekunnskapene mine, får vel poste om jeg finner noe

Jonas · 17. juni 2008

Ingen fade med CSS i dag. Utrolig lett med jQuery, though. (Og ikke spør hva det er - søk)

Logg inn

hover efekt plasseres til høyere

Anbefalte innlegg

lilfire

Lenke til kommentar

Videoannonse

Stian89

Lenke til kommentar

Dryper

Lenke til kommentar

Stian89

Lenke til kommentar

Dryper

Lenke til kommentar

lilfire

Lenke til kommentar

Dryper

Lenke til kommentar

Stian89

Lenke til kommentar

Dryper

Lenke til kommentar

Jonas

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Hvem er aktive 0 medlemmer