Archief - Q: Foto's vergroten bij aanduiden

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
S

SamuraiDuo

Legacy Member
Ey,
Ik zou dus graag hebben dat foto'tjes op mn website staan, niet te groot zodat ook bij veel fotos het overzichtelijk blijft.
Wanneer bezoekers dan met de muisaanwijzer op de foto gaan staan dat deze zich uitvergroot over een gedeelte van het scherm.

Het enige wat ik tot nu toe gevonden heb is dit :

<a href="*link-plaatje*" target="top"><img src="*link-plaatje*" width="102,4" height="76,8"></a>

Maar dit zorgt er enkel voor dat je
1.op de foto moet KLIKKEN
2.de foto opent in een NIEUW VENSTER

Ik denk dat het duidelijk is wat ik wil bereiken zeker :)

Alvast bedankt ;)
Greetz,
Glenn
S

SamuraiDuo

Legacy Member
Dit is wel EXACT wat ik zoek

Maar ik kan er eigk niet goed aan uit :s
En voor zover het gaat ,krijg ik dat nog niet in orde ze...
De fotos blijven van int begin al zo groot :s

Tenzij dat ik dan alle fotos zelf eerst ga resizen , maar ik zoek een code die dit zelf doet ...

EDIT : Gaat blijkbaar dus ook niet , maar ik twijfel of ik wel juiste code eruit heb gehaald , daarom mss iemand die de code hier ff kan posten en me kan zeggen wat ik waar moet invullen ?

Greetz
S

SamuraiDuo

Legacy Member
't Is me gelukt , maar kan ik die foto ook GROTER laten openen na het aanduiden ? :)
Blijft iets te klein tijdens het aanwijzen...

Greetz

EDIT: Werkt perfect nu...
Behalve in IE , in FF werkt het perfect.

De fototjes staan onderaan de pagina , dus wanneer je deze vergroot moet de pagina ook vergroten of je ziet maar een gedeelte van de foto... FF doet dit automatisch

IE doet dit dus niet , er zit wel een mapje bij de CSS met naam 'IE_FIXES' maar daar vindt ik niet direct iets...

Dit is wat er staat in dat mapje :

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{

top: -38px;
left: -50px;



}

.hoverbox li
{
position: static;



}

Hopelijk wat hulp hiervoor ;)

Greetz
D

Dave

Legacy Member
<!--[if lt IE]><link rel="stylesheet" type="text/css" href="..../ie.css"><![endif]-->

zet dit eens in de head. Pas de plaats wel aan naar waar u ie.css staat.
S

SamuraiDuo

Legacy Member
Dat staat er al ...
In het mapje css heb ik 2 ondermapjes

HOVERBOX

*
{
border: 0;
margin: 0;
padding: 0;
}

/* =Basic HTML, Non-essential
----------------------------------------------------------------------*/

a
{
text-decoration: none;
}

body
{
background: #fff;
color: #777;
margin: 0 auto;
padding: 50px;
width: 620px;
}

h1
{
background: inherit;
border-bottom: 1px dashed #ccc;
color: #933;
font: 17px Georgia, serif;
margin: 0 0 10px;
padding: 0 0 5px;
text-align: center;
}

p
{
clear: both;
font: 10px Verdana, sans-serif;
padding: 10px 0;
text-align: center;
}

p a
{
background: inherit;
color: #777;
}

p a:hover
{
background: inherit;
color: #000;
}

/* =Hoverbox Code
----------------------------------------------------------------------*/

.hoverbox
{
cursor: default;
list-style: none;
}

.hoverbox a
{
cursor: default;
}

.hoverbox a .preview
{
display: none;
}

.hoverbox a:hover .preview
{
display: block;
position: absolute;
top: -33px;
left: -45px;
z-index: 1;
}

.hoverbox img
{
background: #fff;
border-color: #aaa #ccc #ddd #bbb;
border-style: solid;
border-width: 1px;
color: inherit;
padding: 2px;
vertical-align: top;
width: 100px;
height: 75px;
}

.hoverbox li
{
background: #eee;
border-color: #ddd #bbb #aaa #ccc;
border-style: solid;
border-width: 1px;
color: inherit;
display: inline;
float: left;
margin: 3px;
padding: 5px;
position: relative;
}

.hoverbox .preview
{
border-color: #000;
width: 200px;
height: 150px;
}

En IE_FIX

/* =Internet Explorer Fixes
----------------------------------------------------------------------*/

.hoverbox a
{
position: relative;
}

.hoverbox a:hover
{
display: block;
font-size: 100%;
z-index: 1;
}

.hoverbox a:hover .preview
{
top: -38px;
left: -50px;
}

.hoverbox li
{
position: static;
}

En dit staat in de head van mn html code :

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Hoverbox Image Gallery</title>
<link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" />
<!--[if IE]>
<link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" />
<![endif]-->
</head>
<body>
<h1>Reptile Image Gallery</h1>
<ul class="hoverbox">


Iemand een idee ?
S

SamuraiDuo

Legacy Member
Ja da macheerd wel , maar als de foto helemaal onderaan de pagina staat dan geeft hij in IE maar een deel van de vergroting weer.

Greetz
M

Mithrandix

Legacy Member
SamuraiDuo zei:
Ja da macheerd wel , maar als de foto helemaal onderaan de pagina staat dan geeft hij in IE maar een deel van de vergroting weer.

Greetz
Klik om te vergroten...

geef dan een padding in je css voor IE aan?
S

SamuraiDuo

Legacy Member
Ja 't is da dat ik niet snap , welk regeltje moet ik waar bijtypen ? :)
Greetz
M

Mithrandix

Legacy Member
in je ie_fixes.css zet je

Code: 
ul.hoverbox
{
	padding: 0 0 500px;
}

500px is natuurlijk teveel :p ge moet zelf zien hoeveel ge extra wilt
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan