mousover

Status
Niet open voor verdere reacties.
J

janusvl

Gebruiker
Lid geworden
11 apr 2009
Berichten
159
goede dag,

ik ben met een javascript menu bezig en het gaat vrij aardig maar nu had ik een vraag

ik heb de volgende code
HTML: 
<style type="text/css">
.info{
border: dotted 3px #000000;
padding:10px;
margin:10;
text-align:center;
background-color:#ffff80;
}
.on
{background-color:#4E9CE9;
}
.off
{background-color:#010042;
}   
</style>

<tr> <td onmouseover="this.className='on'" onmouseout="this.className='off'"  style="cursor: hand" width="100" height="50" bgcolor="#010042" align="center" valign="center"><a href="#"><FONT SIZE="5"><b>test link</b></FONT></a></td></tr>

en die dan een paar keer. Nu wordt alles wel netjes blauw maar nu wil ik dat het blauw blijft tot ik over de volgende ga is dat mogelijk

alvast bedankt janus
 
kan je je hele code sturen?
want zo snap ik niet precies wat je wilt enz..
 
ja dat kan ik

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
 
<head>
<style type="text/css">
.info{
border: dotted 3px #000000;
padding:10px;
margin:10;
text-align:center;
background-color:#ffff80;
}
.on
{background-color:#4E9CE9;
}
.off
{background-color:#010042;
}   
</style>
<SCRIPT LANGUAGE="JavaScript">

<!-- Begin script
var action = new Array();
action[0] = "<font color='#000000'><b>pakket1</b> met met met met met met mayo</font>";
action[1] = "pakket2";
action[2] = "<i>pakket3</i>";
action[3] = "pakket4";
//  End script -->
</SCRIPT>
</head>
 
<body bgcolor="#ffffff" text="#FFFFFF" link="#FFFFFF" vlink="#ffffff" alink="#FFFFFF">
<br>
<br>
<table align="center" bgcolor="#FFFFFF">
    <tr>
	<td>
	<table>
	<tr> <td onmouseover="this.className='on'; content.innerHTML = action[0];" onmouseout="this.className='off'"  style="cursor: hand" width="100" height="50" bgcolor="#010042" align="center" valign="center"><a href="#"><FONT SIZE="5"><b>test link</b></FONT></a></td></tr>

	<tr> <td onmouseover="this.className='on'; content.innerHTML = action[0];" onmouseout="this.className='off'"  style="cursor: hand" width="100" height="50" bgcolor="#010042" align="center" valign="center"><a href="#"><FONT SIZE="5"><b>test link</b></FONT></a></td></tr>

	<tr> <td onmouseover="this.className='on'; content.innerHTML = action[0];" onmouseout="this.className='off'"  style="cursor: hand" width="100" height="50" bgcolor="#010042" align="center" valign="center"><a href="#"><FONT SIZE="5"><b>test link</b></FONT></a></td></tr>


 </table>
<br>
</td>
            <td width="400" height="400"> <!-- de cellen --> 
              <div align="center"><a id="content"><font color="#000066">Hier kan je je commentaar kwijt<br>wat je bezoeker kan lezen<br> als ze over <br>
                de link gaan</font></a> </div>
            </td>
    </tr>
</table>
</body>
 
</html>

ik moet nog wel wat doen aan de code maar dit is het idee
 
Wat de bedoeling is is dat als je er over gaat met de muis dat de achtergrond kleur veranderd en de tekst in de box.

dit gaat goed

maar als ik nu er vanaf ga veranderd de kleur terug. Nu wil ik dat dit pas gebeurt als ik over de volgende ga

dus 1 moet verkleurd blijven tot ik over 2 3 of 4 ga

ik hoop dat het zo duidelijk is anders hoor ik het wel

janus
 
Hey janusvl,

Ik heb de code voor je geschreven. Het heeft me wel de halve middag gekost :shocked:
Maar goed hier is de code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>
    PAGE_NAME!!!!!!!!!
</title>

<style type="text/css">
	.info
	{
		border: dotted 3px #000000;
		padding:10px;
		margin:10;
		text-align:center;
		background-color:#ffff80;
	}
		
	body
	{
		background-color: White ;
	    color: White;
	}

	.link
	{
        color: White;
        font-size:large;
        font-weight:bold;
    }
    
    .tdMouseOverStyle
    {
        width: 100;
        height: 50;
        background-color: #010042;
        text-align:center;
        vertical-align:middle;
	}
</style>


<script type="text/javascript">
 
//<!-- Begin script
var colored = false;
var lastid;

var action = new Array();
action[0] = "<font color='#000000'><b>pakket1</b> met met met met met met mayo</font>";
action[1] = "pakket2";
action[2] = "<i>pakket3</i>";
action[3] = "pakket4";

function onMouseOver(id)
{
    var elementID = document.getElementById(id);
    
    if(colored==true)
    {
        onMouseOut(lastid);
    }    
    
    elementID.style.backgroundColor='#4E9CE9';
    lblFooter.innerHTML = "td ID = " + id;
    
    lastid = id;
    colored = true;
}

function onMouseOut(id)
{
    var elementID = document.getElementById(id);
    elementID.style.backgroundColor='#010042';
}
//  End script -->


</script>

</head>
 
<body>
    <table align="center" bgcolor="#FFFFFF" border="1">
        <tr>
            <td>
                <table border="1">
                    <tr> 
                        <td id="td1" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                    
                    <tr> 
                        <td id="td2" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                    
                    <tr> 
                        <td id="td3" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                </table>
            <br />
            </td>
            
        <td width="400" height="400"> <!-- de cellen --> 
            <div align="center">
                <a id="content">
                    <font color="#000066">
                        <label id="lblFooter">
                            Hier kan je je commentaar kwijt wat je bezoeker kan lezen
                            <br /> 
                            als ze over de link gaan.
                        </label>
                        
                    </font>
                </a> 
            </div>
        </td>
    </tr>
</table>

</body> 
</html>

Tevens heb ik je code meer leesbaarder gemaakt en ook extra dingen aangepast. kijk maar ;)

Byee VRC

P.S. Een andere manier maar die was te ingewikkeld voor mij. khad geen zin om me erin te verdiepen omdat het me gwnweg TE VEEL tijd zou kosten.

*
 
Laatst bewerkt:
visha zei:
Hey janusvl,

Ik heb de code voor je geschreven. Het heeft me wel de halve middag gekost :shocked:
Maar goed hier is de code
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
<title>
    PAGE_NAME!!!!!!!!!
</title>

<style type="text/css">
	.info
	{
		border: dotted 3px #000000;
		padding:10px;
		margin:10;
		text-align:center;
		background-color:#ffff80;
	}
		
	body
	{
		background-color: White ;
	    color: White;
	}

	.link
	{
        color: White;
        font-size:large;
        font-weight:bold;
    }
    
    .tdMouseOverStyle
    {
        width: 100;
        height: 50;
        background-color: #010042;
        text-align:center;
        vertical-align:middle;
	}
</style>


<script type="text/javascript">
 
//<!-- Begin script
var colored = false;
var lastid;

var action = new Array();
action[0] = "<font color='#000000'><b>pakket1</b> met met met met met met mayo</font>";
action[1] = "pakket2";
action[2] = "<i>pakket3</i>";
action[3] = "pakket4";

function onMouseOver(id)
{
    var elementID = document.getElementById(id);
    
    if(colored==true)
    {
        onMouseOut(lastid);
    }    
    
    elementID.style.backgroundColor='#4E9CE9';
    lblFooter.innerHTML = "td ID = " + id;
    
    lastid = id;
    colored = true;
}

function onMouseOut(id)
{
    var elementID = document.getElementById(id);
    elementID.style.backgroundColor='#010042';
}
//  End script -->


</script>

</head>
 
<body>
    <table align="center" bgcolor="#FFFFFF" border="1">
        <tr>
            <td>
                <table border="1">
                    <tr> 
                        <td id="td1" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                    
                    <tr> 
                        <td id="td2" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                    
                    <tr> 
                        <td id="td3" onmouseover="onMouseOver(id)" class="tdMouseOverStyle" >
                        <a href="#" class="link">
                            test link
                        </a>
                        </td>
                    </tr>
                </table>
            <br />
            </td>
            
        <td width="400" height="400"> <!-- de cellen --> 
            <div align="center">
                <a id="content">
                    <font color="#000066">
                        <label id="lblFooter">
                            Hier kan je je commentaar kwijt wat je bezoeker kan lezen
                            <br /> 
                            als ze over de link gaan.
                        </label>
                        
                    </font>
                </a> 
            </div>
        </td>
    </tr>
</table>

</body> 
</html>

Tevens heb ik je code meer leesbaarder gemaakt en ook extra dingen aangepast. kijk maar ;)

Byee VRC

P.S. Een andere manier maar die was te ingewikkeld voor mij. khad geen zin om me erin te verdiepen omdat het me gwnweg TE VEEL tijd zou kosten.

*
Klik om te vergroten...

Ik heb het gezien en het werkt perfect

En de code was niet echt overzichtelijk nee het was ook nog maar een voorbeeld code:p

bedankt

Janus
 
Zou je nog rechtsonder willen klikken op 'Vraag is opgelost'
thnx
 
Gewoon omdat ik er plezier aan heb geef ik mijn code ook door .


[JS]<SCRIPT LANGUAGE="JavaScript">

<!-- Begin script

var oldobj= " " ;
function swapper(obj){
obj.className = 'on';
if(oldobj.className == 'on'){
alert(oldobj.className);
oldobj.className = 'off';
}
oldobj=obj;
oldobj.className=obj.className;
alert(oldobj.className);
}

var action = new Array();



<body bgcolor="#ffffff" text="#FFFFFF" link="#FFFFFF" vlink="#ffffff" alink="#FFFFFF">
<br>
<br>
<table align="center" bgcolor="#FFFFFF">
<tr>
<td>
<table>
<tr> <td onmouseover="swapper(this)" class='off' style="cursor: hand" width="100" height="50" bgcolor="#010042" align="center" valign="center"><a href="#"><FONT SIZE="5"><b>test link</b></FONT></a></td></tr>[/JS]

De swapper-functie plakken in het script gedeelte en <tr> aanpassen .
De debug-alerts wegnemen
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan