mouseover på <td>#1 giver andet billede i andet <td>#2
Vi starter med min kode:<style type="text/css">
td{ width: 50px; height: 70px; border: 1px ridge blue;}
.content{width: 250px;}
.spacer{ width: 60px; border: none;}
.mt0000{background:no-repeat;background-image:url(art/mal/thumb/m_t_0000.jpg);}
.mt0001{background:no-repeat;background-image:url(art/mal/thumb/m_t_0001.jpg);}
.mt0002{background:no-repeat;background-image:url(art/mal/thumb/m_t_0002.jpg);}
.mt0003{background:no-repeat;background-image:url(art/mal/thumb/m_t_0003.jpg);}
.mt1000{background-position:center; background:no-repeat; background-image:url(art/mal/thumb/m_t_1000.jpg);}
.mt1001{background:no-repeat;background-image:url(art/mal/thumb/m_t_1001.jpg);}
.mt1002{background:no-repeat;background-image:url(art/mal/thumb/m_t_1002.jpg);}
.mt2000{background:no-repeat;background-image:url(art/mal/thumb/m_t_2000.jpg);}
.specbluea{background:no-repeat;background-image:url(art/mal/thumb/specblue_a.jpg);}
.specblueb{background:no-repeat;background-image:url(art/mal/thumb/specblue_b.jpg);}
.specbluec{background:no-repeat;background-image:url(art/mal/thumb/specblue_c.jpg);}
.specblued{background:no-repeat;background-image:url(art/mal/thumb/specblue_d.jpg);}
.specreda{background:no-repeat;background-image:url(art/mal/thumb/specred_a.jpg);}
.specredb{background:no-repeat;background-image:url(art/mal/thumb/specred_b.jpg);}
.specredc{background:no-repeat;background-image:url(art/mal/thumb/specred_c.jpg);}
.specredd{background:no-repeat;background-image:url(art/mal/thumb/specred_d.jpg);}
</style>
</head>
<body>
<table border="0" align="center">
<tr>
<td class="mt0000"> </td>
<td class="mt0001"> </td>
<td class="mt0002"> </td>
<td class="mt0003"> </td>
<td class="spacer" rowspan="4"> </td>
<td class="content" rowspan="4">Content</td>
</tr>
<tr>
<td class="mt1000"> </td>
<td class="mt1001"> </td>
<td class="mt1002"> </td>
<td class="mt2000"> </td>
</tr>
<tr>
<td class="specbluea"> </td>
<td class="specblueb"> </td>
<td class="specbluec"> </td>
<td class="specblued"> </td>
</tr>
<tr>
<td class="specreda"> </td>
<td class="specredb"> </td>
<td class="specredc"> </td>
<td class="specredd"> </td>
</tr>
Spørgsmålet er følgende:
Når musen holdes over de forskellige celler, vises det tilsvarende billede i den celle der har class="content". Det billede der vises, er naturligvis en hel del større end dem der er i cellerne.
Jeg har allerede lavet et gennemsigtigt billede på 25X25 px til formålet.
Hvordan gøres dette ??
Billederne skal hentes fra CSS fordi det skal være rimeligt overskueligt at ændre sidens indhold. Den der i fremtiden skal gøre dette, kender ikke til HTML.
Løsning #2:
Som det ses, hentes billederne igennem CSS.
Findes der en metode hvor billederne skrives ind i et .txt dokument, (incl. sti til billedet), hvor en funktion i cellerne kalder billederne, og som stadig har mouseover funktionen som beskrevet herover ??
