border interno a immagine

[zoc]

ciao a tutti...
sapete se è possibile dare un border a un'immagine, ma internamente? andando cosi sopra l'immagine?

grazie mille!

[LùcazStrict]

non penso, però dovrebbe essere un effetto abbastanza semplice da ottenere con un paio di div. almeno credo

[fcaldera]

sì si può fare ad esempio

marcatura

<span><img.... /></span>

supponiamo un immagine rettangolare di 100(a)x50(b) e un bordo di 5px(c) che deve sovrapporsi (a,b,c saranno riferimenti per il css)

allora

span {
   display: block;
   position : relative;
   width  : (a) - ((c)*2) px;
   height : (b) - ((c)*2) px;  
   border : (c)px solid red;
   overflow : hidden;
}

span img {
   position : absolute;
   left       : -(c) px;
   top       : -(c) px;
}

Nota: non l'ho provato, fai un test ed eventualmente lo si corregge;

[fcaldera]

Originariamente inviato da LùcazStrict
non penso, però dovrebbe essere un effetto abbastanza semplice da ottenere con un paio di div. almeno credo

un esempio (anche minimo) sarebbe stato indicato, altrimenti resta un suggerimento del tipo "no, ma forse sì ma anche no"

[LùcazStrict]

si più o meno è quello che intendevo io, ma una curiosità: come mai hai preferito utilizzare uno span display:block piuttosto che un div?

[LùcazStrict]

Originariamente inviato da fcaldera
un esempio (anche minimo) sarebbe stato indicato, altrimenti resta un suggerimento del tipo "no, ma forse sì ma anche no"

aazz in effetti non hai tutti i torti.. la prossima volta non ti deluderò!!!

[fcaldera]

avrei potuto usare anche un

o un <ins> o un altro elemento inline
i div sono già abbastanza (ab)usati per la costruzione del layout, usarli anche per motivi unicamente di resa mi sembra inutile.

[LùcazStrict]

Originariamente inviato da fcaldera
avrei potuto usare anche un

o un <ins> o un altro elemento inline
i div sono già abbastanza (ab)usati per la costruzione del layout, usarli anche per motivi unicamente di resa mi sembra inutile.

ah ho capito ora.

ad ogni modo ti mostro anche il modo che avevo improvvisato io:

html:

<div class="image_border">
	<div></div>
	[img]img.jpg[/img]
</div>

css:

div.image_border{width:170px;height:170px;position:relative;}
div.image_border div{width:160px;height:160px;position:absolute;border:5px solid #ff0000}

[fcaldera]

Originariamente inviato da LùcazStrict

css:

div.image_border{width:170px;height:170px;position:relative;}
div.image_border div{width:160px;height:160px;position:absolute;border:5px solid #ff0000}

così facendo però l'immagine non si vede più, coperta dal div interno. Fai una prova

[LùcazStrict]

a dire il vero l'ho già fatta, solo il bordo copre l'immagine, come da richiesta :master:

edit:
ho messo momentaneamente l'esempio su
www.tortuga-soft.com/ff.htm

(effetto da attivare con il mouseover per far notare la differenza!)