text onder afbeelding

Door Niek Kasius op 08-02-2009 08:52

416 views

ik heb naar veel zoeken zelf een mouseover in elkaar gezet die foto's vergroot zonder dat ze van plaats veranderen dat werkt via CSS, maar ik krijg de text die er onder staat niet zo ingesteld dat die onzichbaar is, en dat die pas te voorschijn komt bij de mouseover. hieronder het script mischien dat er iemand me kan helpen.

<style type="text/css">

image.off {
width: 150px;
height: 100px;
}

image.on {
width: 448px;
height: 336px;
}

</style>

</head>
<body>

      <TD align="center">
<image class="off" onmouseover="this.className='on'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg" onmouseout="this.className='off'" img src="http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg"><p>De spanning<br> is weer om te snijden</p>
 </div>
      </TD>

Eddy E

08-02-2009 08:58

Kies zelf:

image.off {
width: 150px;
height: 100px;
font-size: 0pt;
}

image.on {
width: 448px;
height: 336px;
font-size: 12pt;
}[code]

[code]image.off {
width: 150px;
height: 100px;
text-indent: -9999px;
}

image.on {
width: 448px;
height: 336px;
text-indent: 0;
}[code]

[code]image.off {
width: 150px;
height: 100px;
color: #fff;
}

image.on {
width: 448px;
height: 336px;
color: #000;
}

En waarom werk je niet gewoon met :hover?
Dat kan veel sneller en dan is het puur CSS.
En het werkt ook als Javascript uit staat.
En het werkt altijd. Zet alles in een <a> en het werkt ook nog eens in IE6.

In het laatste voorbeeld wellicht de kleuren aanpassen.
De text is er dan wel, maar zie je niet.

Niek Kasius

08-02-2009 10:27

sorry maar dat werkt niet met die css, krijg dan helemaal geen foto meer te zien, alleen als ik de text-indent van -9999 naar 0 zet wel weer.
Maar waarom die text-indent? die verschuift toch alleen maar de foto heb ik "door te proberen" gemerkt. maarja alweer iets geleerd.

Niek Kasius

10-02-2009 14:33

ik heb iets anders gevonden en dat aangepast maar ben er nog niet helemaal tevreden over,
want het verschuift de de andere foto's, nu is dat op zich niet erg,
alleen bij de onderste drie rijen foto's moet je gaan scrollen
omdat je ze anders niet hellemaal met text te zien krijgt.

<style type="text/css"> 
#swap #logo { 
    display: block; 
    border: 1;
    border-color:#0000A0;
} 
  
#swap a #logohover { 
    display: none;
} 

#swap a:hover #logo { 
    display: none;
    border-color:#0000A0; 
}   

#swap a:hover #logohover { 
    display: block;
}
 
#p a:hover #logohover {  
    display: text;
}   

</style>
</head>
<body>

<div id=\"content\">
  <table cellpadding=\"5\" cellspacing=\"15\" width=\"70%\" border=\"0\" bordercolor=\"#0000A0\">
    <tr>
      <td>
        <div id=\"swap\"> 
          <a href=\"#\"> 
            <img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"150px\" height=\"100px\" border=\"1\" id=\"logo\" alt=\"dc hofland 

clubcampioenschap 2008\" /> 
            <img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (1).jpg\" width=\"448px\" height=\"335px\" border=\"1\"  id=\"logohover\" alt=\"dc 

hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>De spanning<br>is ook dit jaar weer te snijden</font></p>
          </a> 
        </div>
      </td>
      <td>
        <div id=\"swap\">
          <a href=\"#\">  
            <img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"150px\" height=\"100px\" border=\"0\" id=\"logo\" alt=\"dc hofland 

clubcampioenschap 2008\" /> 
            <img src=\"http://localhost/cafehofland/dchofland/restfoto/clubchampioen08/CC08 (2).jpg\" width=\"448px\" height=\"335px\" border=\"0\"  id=\"logohover\" alt=\"dc 

hofland clubcampioenschap 2008\" /><p id=\"logohover\"><font color=\"#0000A0\"><b>Frank denkt &nbsp \"piep, knars, kraak\"<br>ships! moet ik nog zoveel</font></p> 
          </a> 
        </div>
      </td>

- SanThe -

10-02-2009 14:36

Je post is nu niet echt leesbaar. Pas je post even aan en gebruik [ignore]

en

[/ignore] tags om je code heen. Om php code zet je uiteraard dit:<?php en ?>Gebruik je

knop om dit te doen.

SanThe.

Reageren

Inloggen om te reageren