brugerstyring af status
Her er et spørgsmål, som jeg vil betegne som noget udfordrende, men håber at der er hjælp at hente.Jeg har en html side, som vises gennem lotus-notes.
Jeg ønsker at en besøgende på siden kan klikke et sted oppe til højre ved status(evt. på grafikken) og derigennem kunne ændre linket til grafik fra ”grønt flueben” til ”udråbsteg” eller ”rødt kryds” som jeg selv har liggende og kunne ændre teksten i ”status-feltet”.
Denne opdatering skal kunne foretages fra html-siden, uden at skulle gå ned og ændre i koden. Jeg vil altså via et javaScript eller lign. kunne give brugeren mulighed for at ændre sidens ”status” ved at vælge imellem 3 grafikker der skal vises og frit kunne skrive en bemærkning.
Kan dette overhoved lade sig gøre og i så fald, hvordan?
Jeg vil være meget taknemmelig for hjælp med dette.
En ”ledetråd” vil også være meget værdsat.
På forhånd tak.
********** kode *********
<html>
<head>
<title>Portalen | Forside</title>
<style type="text/css">
body {
font-family: verdana;
font-size:11px;
color:#22387F;
}
h1 {
font-family: verdana;
font-size: 14px;
font-weight: bold;
color: #22387F;
}
table.divider {
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: dotted dotted dotted dotted;
border-color: #cccccc #cccccc #cccccc #cccccc;
border-collapse: collapse;
background-color: white;
align: left;
valign: top;
}
table.divider td {
border-width: 1px 1px 1px 1px;
padding: 15px 15px 15px 15px;
border-style: dotted dotted dotted dotted;
border-color: #cccccc #cccccc #cccccc #cccccc;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
vertical-align: top;
}
table.noborder {
border-width: 1px 1px 1px 1px;
border-spacing: 0px;
border-style: none none none none;
border-color: gray gray gray gray;
border-collapse: collapse;
background-color: white;
align: left;
valign: top;
}
table.noborder th {
border-width: 1px 1px 1px 1px;
padding: 0px 0px 0px 0px;
border-style: none none solid none;
border-color: #cccccc #cccccc #cccccc #cccccc;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
font-family: verdana;
font-size: 14px;
font-weight: bold;
color: #22387F;
text-align: left;
}
table.noborder td {
border-width: 1px 1px 1px 1px;
padding: 15px 0px 0px 0px;
border-style: none none none none;
border-color: gray gray gray gray;
background-color: white;
-moz-border-radius: 0px 0px 0px 0px;
text-align: left;
}
#nav, #nav ul { /* all lists */
padding: 0;
margin: 0;
list-style: none;
line-height: 2;
}
#nav a {
display: block;
width: 12em;
}
#nav li { /* all list items */
float: left;
width: 11em; /* width needed or else Opera goes nuts */
}
#nav li ul { /* second-level lists */
position: absolute;
background: #cccccc;
width: 11em;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}
#nav li ul ul { /* third-and-above-level lists */
margin: -2em 0 0 11em;
}
#nav li:hover ul ul, #nav li.sfhover ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul { /* lists nested under hovered list items */
left: auto;
}
#content {
clear: top;
color: #ccc;
}
#headingbullet {
font-size: 14px;
font-weight: bold;
color: #FF9933;
}
.menu {
margin-right : 0px;
margin-left : 0px;
margin-bottom: 0px;
margin-top: 0px;
}
.submenu {
margin-right : 5px;
margin-left : 16px;
margin-bottom: 5px;
margin-top: 5px;
}
.menu_bottom {
font-size: 10px;
font-family: Verdana;
background-color: #CACDF7;
text-align: center;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
border-bottom: 1px solid #888888;
padding-top:3px;
padding-bottom:3px
}
a:link {
text-decoration: underline;
color: #22387F
}
a:visited {
text-decoration: underline;
color: #22387F
}
a:active {
text-decoration: underline;
color: #22387F
}
a:hover {
text-decoration: underline;
color: #FF9933
}
a.menu:link {
text-decoration: none;
color: #22387F
}
a.menu:visited {
text-decoration: none;
color: #22387F
}
a.menu:active {
text-decoration: none;
color: #22387F
}
a.menu:hover {
text-decoration: none;
color: #FF9933
}
</style>
<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
function toggle(e){
e=document.getElementById(e);
e.style.display=e.style.display=="none"?"":"none"
}
//--><!]]></script>
</head>
<body>
<center>
<!-- START PÅ MENU -->
<table width="876" border="0" bordercolor="#CCCCCC" bgcolor="#CCCCCC">
<tr>
<td width="1" height="34"> </td>
<td width="857"><ul id="nav">
<table width="50" border="0">
<tr>
<td align="left" valign="top">
<li>
<table width="174" border="0">
<tr>
</tr>
</table>
</li>
</td>
<td align="left" valign="top">
<li>
<table width="50" border="0">
<tr>
</tr>
</table>
</li>
</td>
<td align="left" valign="top">
<li>
<table width="50" border="0">
<tr>
</tr>
</table>
</li>
</td>
<td align="left" valign="top">
<li>
<table width="50" border="0">
<tr>
</tr>
</table>
</li>
</td>
<td align="left" valign="top">
<li>
<table width="50" border="0">
<tr>
</tr>
</table>
</li>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- SLUT PÅ MENU -->
<!-- START PÅ KONTEKST -->
<table class="divider" width="882">
<!-- Øverste venstre rude -->
<tr>
<td colspan="3" width="75%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Beskrivelse</th>
<th align="right"><img src="..\Grafik\blank_18x18.png"></th>
</tr>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla pede. Curabitur dui. Etiam ultricies viverra elit. Morbi eros quam, venenatis bibendum, venenatis vel, vehicula in, elit. Aliquam erat volutpat. Praesent faucibus nulla ut tortor. Quisque tristique congue ligula. Pellentesque non libero. Donec faucibus sapien. Integer facilisis metus eget ipsum. Suspendisse faucibus, quam id scelerisque rhoncus, sem lectus pulvinar nisi, at elementum nibh leo ut quam. Etiam nunc metus, sodales ut, ornare at, tincidunt vitae, dolor.<br>
<br>
Nullam leo nisl, feugiat vel, dapibus et, lobortis quis, elit. Maecenas erat nibh, placerat quis, volutpat sed, tincidunt convallis, libero.
</td>
</tr>
</table>
</td>
<!-- Øverste højre rude -->
<td width="25%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Status</th>
<th align="right"><img src="..\Grafik\status_ok_18x18.png"></th>
</tr>
<tr>
<td>
Der er pt. ingen uregelmæssigheder at bemærke.
</td>
</tr>
</table>
</td>
</tr>
<!-- Nederste første rude -->
<tr>
<td width="25%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Lorem</th>
<th align="right"><img src="..\Grafik\blank_18x18.png"></th>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<!-- Nederste anden rude -->
<td width="25%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Ipsum</th>
<th align="right"><img src="..\Grafik\blank_18x18.png"></th>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<!-- Nederste tredje rude -->
<td width="25%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Dolor</th>
<th align="right"><img src="..\Grafik\blank_18x18.png"></th>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
<!-- Nederste fjerde rude -->
<td width="25%">
<table class="noborder" width="100%">
<tr>
<th><font id="headingbullet">»</font>Sit</th>
<th align="right"><img src="..\Grafik\blank_18x18.png"></th>
</tr>
<tr>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</center>
</body>
</html>
