6 svar · 607 visningar · startad av stattin
Hallå där!
Är det någon som har en snabb och bra lösning på följande? Jag vill att exempelvis en cell eller div skall markeras med en färg när man drar musen över och naturligtvis försvinna när man tar bort pekaren. Man jag vill även att man ska kunna klicka för att behålla färgen i cellen samt klicka en gång till för att få bort färgen och då gäller det att att inte mouseover och out körs.
Förstå?
Har'u någon HTML-kod att utgå ifrån?
Nja.. känns väl som det viktiga är hur själva funktionen eller funktionerna man kallar för ändamålet ska se ut, html koden kan väl i stort sett se ut hur som helst.
Eller?
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td colspan="2">Grupp</td>
</tr>
<tr id="res" onmouseover="hl(1);" onmouseout="hl(0);" onclick="hl(3)">
<td>Cell som ska markeras</td>
<td>plus denna </td>
</tr>
</table>
nått åt det hållet kanske.
Brukar du använda serverskript? Om det är vid klick som förändringen ska ske kan du lika gärna ändra mha tex php.
<a href="?color=1">byt färg</a>
if($_GET['color'] == 1)
{
echo "background:#f00;";
}
Tack för PHP förslaget men jag vill nog använda mig av JS i detta fall.
Jag fick följande att funka i IE men inte FX.
<table width="100%" border="0">
<tr id="res" onmouseover="hl(this.id, '#f3f3f3');" onmouseout="hl(this.id, '');" onclick="hlf(this.id);">
<td>JAHO</td>
</tr>
</table>
<script>
function hlf(id) {
obj = document.getElementById(id)
obj.style.backgroundColor = ( obj.style.backgroundColor == '#f3f3f3' ) ? '#c2c287' : '#f3f3f3';
}
function hl(id, color) {
obj = document.getElementById(id)
if(obj.style.backgroundColor != '#c2c287')
{ obj.style.backgroundColor = color }
}
</script>
Vet inte om detta kan hjälpa dig!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<title>Test</title>
<head>
<style type=text/css>
div {width:200px; height:100px; border:1px solid black}
</style>
</head>
<BODY>
<div onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='red';" onclick="this.style.backgroundColor='red';">
JAHO
</div>
</BODY>
</HTML>
Tack Bosse men det blir inte riktigt rätt det där, jag har redan löst problemet och här är en variant.
Denna använder INTE jag då jag har flera divar eller celler som genereras med ett JavaScript, alla måste då ha varsin unik av och på "knapp", men grundtanken är densamma enligt följande:
<div id="res" onmouseover="hl(this.id, '#f3f3f3');" onmouseout="hl(this.id, '');" onclick="hlf(this.id);">
JAHO
</div>
<script language="javascript">
s = "0"
function hlf(id) {
obj = document.getElementById(id)
obj.style.backgroundColor = ( obj.style.backgroundColor == '#f3f3f3' ) ? '#c2c287' : '#f3f3f3';
s = ( s == '0' ) ? '1' : '0';
}
function hl(id, color) {
obj = document.getElementById(id)
if(s == '0')
{ obj.style.backgroundColor = color }
}
</script>
Om någon har en vettigare lösning så varsegod.