Volledige versie bekijken : Kader rond fotos
ice2 26 augustus 2005, 15:54 Hallo, allemaal ik zit met een probleem.
Ik heb in dreamwaver allerlei thumbs (wallpapers sectie van de site)
maar in dreamwaver wil ik er een dun randje rond elke thumb die eerst bv blauw is en als je er met de muis opstaat of overgaat moet die geel worden.
Wat moet ik er juist bij zetten? om dit te doen, want het lukt me maar niet. :verlegen:
Triple_D 26 augustus 2005, 16:13 Zet rond de thumbs met bv photoshop een blauw en een geel randje, en plaats ze als rollover-image. De image met de blauwe rand wordt getoond, en bij mouseover wordt de image met de gele rand getoond.
Mvg,
Triple D.
ice2 26 augustus 2005, 17:14 Mm, dit is een oplossing, maar is er niet een code met border ofziets, want het zijn meer dan 300 thumbs als ik dat allemaal moet gaan doen :s gekke werk (alvast bedankt)
Kent er mss iemand een html code hiervoor.
ice2 26 augustus 2005, 17:43 http://www.acegamer.be/HQ-1.htm hier zie je de gewone html, maar als ik die dan in de site via een module in de site breng (wegens dat de site met een php-engine werkt)
zie ik de kaderkes niet meer ?:s
Tuxke 26 augustus 2005, 17:59 Grote help kan zijn:
http://www.w3schools.com/
CSS -> border
Triple_D 26 augustus 2005, 18:24 Grote help kan zijn:
http://www.w3schools.com/
CSS -> border
Ik ben ook bij CSS aan het kijken. Maar de voorbeelden op W3 gaan enkel over grootte en plaatsbepalingen, niet over mousseovers.
Ik heb zelf hier een cursus CSS, van mijn gevorderdencursus dreamweaver van vorig jaar. Ik ga morgen (ik moet seffens nog gaan werken) eens kijken of ik daar iets terugvind.
Ik ga ook eens kijken of je niet met een image-map kan werken. Boven elke foto een actief veld plaatsen met link bij mouseover, alleen weet ik zo niet of je dat veld ook kan laten omlijnen.
Toegegeven, bij zoveel thumbs zou mijn eerste oplossing nogal omslachtig zijn. Als er echt geen andere oplossing bestaat, kan je voor uw rollover-image een gifje, transparant met gele of blauwe rand, gebruiken. Dit kan je dan telkens gebruiken, zodat je je thumbs zelf niet moet bewerken.
Maar ik zoek morgen mee verder naar een betere oplossing ( ik zie hier voor mezelf ook wel een toepassing in ).
Mvg,
Triple D.
ice2 27 augustus 2005, 02:44 Ah dat is tof, ik hoop dat je iets vindt.
Alvast bedankt Triple D.
Snakey 27 augustus 2005, 11:37 zet in je img-tag van al je thumbnails de class thumbs, bv.
<img src="..." class="thumbs" />
Dan kun je de volgende selectors gebruiken:
img.thumbs {
}
en voor mouse-over
img.thumbs:hover {
}
ice2 27 augustus 2005, 13:43 Werkt nog steeds niet :s
heb het volgende gedaan.
<td width="127" bgcolor="#444B55" class="style1"><div align="center"><a href="http://www.acegamer.be/images/wallpapers/HQ%20walls/002.jpg" target="http://www.acegamer.be/images/wallpapers/HQ%20walls/002.jpg"><img src="http://www.acegamer.be/images/wallpapers/thumbs/thumbs1/002.jpg" class="thumbs" width="99" height="99" hspace="12" vspace="5" border="1" title="" /></a></div></td>
en in de css file dit toegevoegd.
img.thumbs {
border:1px;
border-color: #79a6e3
}
img.thumbs:hover {
border:1px;
border-color: #FFCC00
}
zit er mss een fout in?
______
Ok op de een of andere manier werkt het, heb iets aangepast in dreamwaver, maar het werkt enkel in firefox, in IE krijg ik al wel het blauwe randje. Hoe kan ik dit in IE ook laten werken. Alvast bedankt aan de gene die geholpen hebben.
Snakey 27 augustus 2005, 14:18 Hier een voorbeeld:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Test</title>
<style type="text/css">
img.thumbs {
border-width:1px;
border-color: #79a6e3;
}
img.thumbs:hover {
border-width:1px;
border-color: #FFCC00;
}
</style>
</head>
<body>
<a href="http://www.acegamer.be/images/wallpapers/HQ%20walls/002.jpg" target="_blank"><img
src="http://www.acegamer.be/images/wallpapers/thumbs/thumbs1/002.jpg"
class="thumbs" title="" height="99" width="99"></a>
</body>
</html>
ice2 27 augustus 2005, 14:25 Ja het werkte al ( met een aanpassing )
maar in IE zie je enkel een blauwe rand ?
Snakey 27 augustus 2005, 14:41 IE = evil voor webdesigners (tenminste voor degene die een webpagina wilt maken zoals het eigenlijk MOET zijn). IE kan geen css renderen zoals het moet, als je het wilt laten werken in IE moet je zorgen dat je niet meer volgens de standaard html schrijft, je moet dan in img de attribuut onmouseover gebruiken, gecombineerd met javascript. Grote kans dan dat de pagina dan niet meer juist werkt in andere browsers.
ice2 27 augustus 2005, 14:52 k, zal het dan maar best zo laten, c*t IE
nojs 27 augustus 2005, 14:56 ik heb een heel goede link om html te leren: www.handleidinghtml.nl (http://www.handleidinghtml.nl) zeer goede link !!!!
Triple_D 27 augustus 2005, 19:07 Voila, ook weeral iets bijgeleerd.
Ik heb ook nog wat verder gezocht, maar meer in de richting van behaviors. En zonder een echt goed en snel resultaat.
Het script van Snakey lijkt me het gemakkelijkst. Laat wel eens iets weten of je het in I.E. kon laten werken.
Ik vind het wel raar: bij mij is het meestal andersom. In I.E. geen probleem, maar vanaf ik een andere browser probeer, heb ik welleens problemen.
Nu vlug bovenstaand script in een bestandje opslaan, want ik heb binnenkort ook zoiets nodig.
Thx, Snakey
ice2 29 augustus 2005, 17:33 Heb niet verder gezocht over hoe het komt dat het in IE niet wilt werken, maar heb wel niet het script van Snakey genomen. Heb iets gewijzigd in dreamwaver zelf.
|
|