Avatar billede mortency Nybegynder
06. juni 2005 - 21:51 Der er 8 kommentarer og
1 løsning

Rounded corners og image change på mouse over

Jeg har 3 billeder som skal centreres til bredde 128 px så de passer inn i en ramme som har runde hjørner. Dette har jeg fikset med et transparent billede som ligger over. Problemet er at de vises i full størrelse og ikke i 128px hvordan kan jeg løse dette? noen som har noen ideer? Hva med layers?

Videre så skal man kunne ta mouseover på de 3 bildene på høyre side så skal det vises i der det store (bilde1) vises.

Bildene hentes fra database så mouseover på kunne takle at bildene heter forskjellige navn...

Noen som kan hjelpe en stakkar?

http://www.cyren.no/roundedcorners/
http://www.cyren.no/roundedcorners/index.zip

//Morten
Avatar billede roenving Novice
07. juni 2005 - 01:39 #1
Du kan ikke få et billede til at være mindre end det er, når det er en baggrund, så du må finde på en anden måde at gøre det på ...

-- men man kan sagtens lægge billeder ovenpå hinanden, så f.eks.

<td style="position:relative;"><img src="images/ramme_liten.gif" width="118" height="66" border="0"><img src="images/xxxprodbilde1.jpg" style="width:118px;position:absolute;" onmouseover="document.getElementById('tdStorBilde').style.backgroundImage='url('+this.src+')';"></td>

-- og så skal den tabelcelle, hvor det skal vises i have et id:

<td id="tdStorBilde" width="280" valign="top" background="images/xxxprodbilde1.jpg">
Avatar billede mortency Nybegynder
09. juni 2005 - 19:09 #2
Hei Roenving!

mouseover virker nesten men den skal vise det orginale bilde på mouseout. Dette får jeg ikke til å virke samt at bilderammen ikke legger seg over men ved siden av!

se http://www.cyren.no/roundedcorners/new.html

<html>
<body>
<table width="698" border="0" cellspacing="0" cellpadding="0" height="280">
  <tr>
    <td width="280" valign="top" background="images/victoria.jpg"><img src="images/transvenstre.gif" width="280" height="280" border="0"></td>   
    <td id="tdStorBilde" width="280" valign="top" background="images/xxxprodbilde1.jpg"><img src="images/transhoyrenew.gif" width="280" height="280" border="0"></td>   
        <td width="20">&nbsp;</td>
        <td width="118" valign="bottom">
        <table width="118" border="0" cellspacing="0" cellpadding="0" height="66">
            <tr>
                <td style="position:relative;"><img src="images/ramme_liten.gif" width="118" height="66" border="0"><img src="images/xxxprodbilde3.jpg" style="width:118px;heigh:66px;position:absolute;return" onmouseover="document.getElementById('tdStorBilde').style.backgroundImage='url('+this.src+')';return" onmouseout="document.getElementById('tdStorBilde').style.backgroundImage='url('images/xxxprodbilde1.jpg')';return"></td>
            </tr>
        </table>
        <br>
        <table width="118" border="0" cellspacing="0" cellpadding="0" height="66">
            <tr>
                <td style="position:relative;"><img src="images/ramme_liten.gif" width="118" height="66" border="0"><img src="images/xxxprodbilde2.jpg" style="width:118px;heigh:66px;position:absolute;return" onmouseover="document.getElementById('tdStorBilde').style.backgroundImage='url('+this.src+')';" onmouseout="document.getElementById('tdStorBilde').style.backgroundImage='url('images/xxxprodbilde1.jpg')';return"></td>
            </tr>
        </table>
        <br>       
        <table width="118" border="0" cellspacing="0" cellpadding="0" height="66">
            <tr>
                <td style="position:relative;"><img src="images/ramme_liten.gif" width="118" height="66" border="0"><img src="images/xxxprodbilde1.jpg" style="width:118px;heigh:66px;position:absolute;return" onmouseover="document.getElementById('tdStorBilde').style.backgroundImage='url('+this.src+')';" onmouseout="document.getElementById('tdStorBilde').style.backgroundImage='url('images/xxxprodbilde1.jpg')';return"></td>
            </tr>
        </table>       
    </td>
  </tr>
</table>
<table width="698" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4" width="20"><img SRC="images/transparent.gif" width="20"></td>
    <td class="editor" width="540" align="right"><a href="http://www.test.no" target="_BLANK">www.test.no</a></td>
    <td width="20" rowspan="3">&nbsp;</td>
    <td class="editor" rowspan="3" width="118">&nbsp;</td>
  </tr>
</table>
<table width="698" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4" width="20"><img SRC="images/transparent.gif" width="20"></td>
    <td class="editor" width="540"><%=strDesignerNavn%><br><br><font face="verdana" size="4" color="#898373"><%=strProduktNavn%></font></td>
    <td width="20" rowspan="3">&nbsp;</td>
    <td class="editor" rowspan="3" width="118">&nbsp;</td>
  </tr>
</table>
<table width="698" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="4" width="20"><img SRC="images/transparent.gif" width="20"></td>
    <td class="editor" width="540"><br><%=strFriFelt%></td>
    <td width="20" rowspan="3">&nbsp;</td>
    <td class="editor" rowspan="3" width="118">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede mortency Nybegynder
12. juni 2005 - 21:40 #3
Noen ideer? HJELP!
Avatar billede roenving Novice
12. juni 2005 - 23:56 #4
Der manglede lige en left-positionering !-)

<td style="position:relative;"><img src="images/ramme_liten.gif" width="118" height="66" border="0"><img src="images/xxxprodbilde3.jpg" style="width:118px;heigh:66px;position:absolute;left:0;" onmouseover="document.getElementById('tdStorBilde').style.backgroundImage='url('+this.src+')';return" onmouseout="document.getElementById('tdStorBilde').style.backgroundImage='url('images/xxxprodbilde1.jpg')';return"></td>
Avatar billede roenving Novice
26. juni 2005 - 08:42 #5
Kom du videre ?-)
Avatar billede mortency Nybegynder
03. oktober 2005 - 13:49 #6
poster du et svar
Avatar billede roenving Novice
04. oktober 2005 - 01:54 #7
Oki '-)
Avatar billede mortency Nybegynder
04. oktober 2005 - 13:50 #8
Ja dette fungerte helt utmerket, takk for hjelpen.
Avatar billede roenving Novice
08. oktober 2005 - 23:42 #9
-- og jeg takker for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

IT-JOB

Capgemini Danmark A/S

Open Application (Denmark)

Zealand – Sjællands Erhvervsakademi S/I

Erfaren IT-projektleder med stærk teknisk indsigt

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Digital forretningsanalytiker til Cyberdivisionen

Netcompany A/S

IT Consultant