[css/dhtml] probleem met image - Softwareontwikkeling

vrijdag 20 januari 2006 15:45

Acties:

Topicstarter

Ik wil dat mensen een image kunnen invoeren via een url. Nu gaat dit allemaal prima. Echter mag de afbeelding maar 470px breed zijn.

Nu heb ik voor firefox gebruik gemaakt van

max-width: 470px;

Voor IE werkt dit niet dus heb ik iets als :

width: expression(document.body.clientWidth > 470 ? "470px" : "auto");

Ik dach dat het goed werkte,

Maar als ik nu een plaatje heb die echt 1024px breed is, maar deze wordt weergegeven als:

[img]"pic.gif"[/img]

dan zal dit plaatje weergegeven worden als 470px breed. Dit moet nu juist wel 200 breed blijven.

Wat ik dus eigenlijk wil is dat als de breedte van de weergave van het plaatje groter dan 470px is, dan moet deze 470px worden en anders niet. De clientWidth kijkt volgens mij alleen naar de werkelijke grootte van het plaatje. Iemand een oplossing?

vrijdag 20 januari 2006 15:58

Acties:

Juulleke

.nl

Ik ken het probleem; in IE kun je het plaatje niet automatisch naar ratio laten schalen als hij bijvoorbeeld breder wordt als jouw gedefinieerde kolom. Wat ik dan doe is serverside de afmetingen van het plaatje opvragen en de afmetingen naar ratio geschaald in de img tag zetten.
In PHP lukt dit al met GD2, maar in ASP moet er een extra component voor geinstalleerd zijn. Of je hebt de afmetingen in de database staan...

Een oplossing hiervoor zou mooi zijn inderdaad..

Juulleke

vrijdag 20 januari 2006 16:07

Acties:

frickY

In PHP heb je daar geen GD Voor nodig hoor; getimagesize()

vrijdag 20 januari 2006 16:13

Acties:

RSD

Topicstarter

Ik wil het graag in een stylesheet houden om het zo flexibel mogelijk te houden

vrijdag 20 januari 2006 16:17

Acties:

X-Lars

Just GoT it.

Een dynamische stylesheet kan ook

stylesheet.css.php

Cascading Stylesheet:

1
2
3

img {
  width:<?=$image_width;?>;
}

vrijdag 20 januari 2006 16:24

Acties:

RSD

Topicstarter

Is niet een oplossing, omdat er allemaal verschillende groottes van plaatjes opstaan. Het mnoet zonder php gebeuren en de plaatjes mogen niet groter zijn dan 470 pixels en als ze kleiner zijn dan 470 pixels moeten ze dat blijven.

vrijdag 20 januari 2006 16:38

Acties:

X-Lars

Just GoT it.

Binnen PHP kan je er natuurlijk voor zorgen dat $image_width de juiste waarde krijgt. Maar goed, PHP is geen optie voor jou.

vrijdag 20 januari 2006 17:12

Acties:

RSD

Topicstarter

Heb inmiddels al van alles geprobeerd, ook met documen.body.width maar dat mag ook niet baten.

Ik vraag me af of het uberhaupt wel op deze manier kan!

De gebruikers kunnen zeg maar een url ingeven en dan kunnen ze de breedte en hoogte van het plaatje wijzigen. In de source staat het dan als:

Afbeeldingslocatie: http://pic.jpg

Als iemand dus een foto heeft ingevoerd met een echte lengte van 1200 dan moet hij deze in dit geval gewoon als 200 invoeren. Echter als ze:

Afbeeldingslocatie: http://pic.jpg

hebben gedaan dan moeyt de width op 470 worden egzet dmv een check in de stylesheet.

Is dit mogelijk?

[ Voor 62% gewijzigd door RSD op 20-01-2006 17:18 ]

vrijdag 20 januari 2006 17:44

Acties:

RSD

Topicstarter

Oplossing:

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <title>Untitled</title>
    <style>
        img {
            max-width: 400px;
            width: expression(this.width > 400 ? "400px" : document.body.width);
        }
    </style>
    </head>

<body>


[img]"pic.jpg"[/img]
<table width=700>
    <tr>
        <td>adsfsdf sdfsdf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sddf sdfs dfsd sdfsd sdf </td>
    </tr>
</table>

</body>

</html>

Of is dit niet goed?

vrijdag 20 januari 2006 17:49

Acties:

X-Lars

Just GoT it.

Attributen (dus de width="10" in <img>) gaan (volgens mij) voor de CSS in je header.

vrijdag 20 januari 2006 17:51

Acties:

RSD

Topicstarter

het werkt wel, test maar eens in je browser en zet de width=10 maar eens veel hoger dan maakt hij ze netjes 400... , hoe het werkt weet ik ook niet. Iemand misschien een uitleg?

zaterdag 21 januari 2006 08:59

Acties:

RSD

Topicstarter

Ik dacht dat het werkte, alleen heel veel browsers liepen erop vast... dit was dus geen goede oplossing. Iemand die wel een goede oplossing heeft?

zaterdag 21 januari 2006 10:54

Acties:

crisp

Devver

Pixelated

Het probleem is dat de width van een image pas uit te vragen is als het plaatje gedownload is. Hiervoor zal je dus met een stukje javascript moeten werken welke je koppelt aan het onload event van je image.

Tip: dit forum bevat ook een image resizer, misschien kan je nog wat ideeen opdoen uit de js-code van dit forum

Intentionally left blank

zaterdag 21 januari 2006 11:02

Acties:

RSD

Topicstarter

@crisp
Dat is 1 grote brei aan code.... maar volgens mij heb jij ook meegewerkt aan de bouw van dit forum...

$_/-\o_$

zaterdag 21 januari 2006 11:09

Acties:

crisp

Devver

Pixelated

RSD schreef op zaterdag 21 januari 2006 @ 11:02:
@crisp
Dat is 1 grote brei aan code.... maar volgens mij heb jij ook meegewerkt aan de bouw van dit forum...

$_/-\o_$

http://gathering.tweakers...ates/tweakers/js/j_gfx.js

Intentionally left blank

zaterdag 21 januari 2006 11:17

Acties:

Copyman

Dode muis

Heel erg simpel, maar zo zou het kunnen:

JavaScript:

function resizeImage(img, rWidth)
{
    var width = img.width;
    var height = img.height;

    var percentage = rWidth / width;

    img.width = rWidth;
    img.height = Math.round(height * percentage);
}

En dan in de image tag:

HTML:

1	[img]"plaatje.gif"[/img]

Wat je ook kan doen, is een array maken van alle images in het document. En deze dan stuk voor stuk controleren of ze niet breder zijn dan een opgegeven width.

Je hebt nu iig een schop in de goede richting, het enige wat je nog moet doen, is het naar eigen wens aanpassen (aangezien ik niets afcheck in dit stukje code). Maar met crisp zijn .js file bij de hand moet dat ook wel lukken lijkt me.

[ Voor 69% gewijzigd door Copyman op 21-01-2006 11:28 ]

Zeer belangrijke informatie: Inventaris

zaterdag 21 januari 2006 11:32

Acties:

aOk

style="overflow:hidden;"

zaterdag 21 januari 2006 14:12

Acties:

RSD

Topicstarter

code:

    <script>
    var el = document.getElementsByTagName('img'), i = el.length, attr;
    while (i--)
    {
        attr = el[i].getAttribute('width');
        if (attr > 470)
        {
            el[i].setAttribute('width','470')
        }
    }
    </script>

Deze code kan ik onderaan de pagina zetten... maar ik weet niet of dat wel zo netjes is. Daarnaastt pakt hij nu alleen alle img tags en ik wil alleen die img tags die alleen in:

#main .article p {

}

en

#main .article {

}

staan. Ik vraag me ook af of dit wel een netteoplossing is.

zaterdag 21 januari 2006 15:06

Acties:

RSD

Topicstarter

En is dit zowel FF en IE compatibel?

Pagina: 1

Reageer