[JS] Afmetingen plaatje - Softwareontwikkeling

dinsdag 22 juli 2003 09:43

Acties:

Vrolijkheid alom!

Topicstarter

Ho wacht! Voordat je deze meteen op slot gooit omdat het al 10000 keer voorbij is gekomen (ja, die topics heb ik allemaal gelezen) toch weer een vers probleem

Zoals de titel al zegt wil ik van een image binnen een form (type='image', dus klikbaar enzo) behalve de coordinaten (die heb ik), ook nog de afmetingen doorgeven met de form.

Hiervoor dacht ik 2 keer een hidden input type te gebruiken en dan ongeveer zo:

JavaScript:

1
2
3

<script lang='text/javascript'>
        document.write("<input type='hidden' name='width' value='"+document.images['cord'].width+"'>");
</script>

Ik krijg 'm echter niet zo ver dat er ook daadwerkelijk iets doorkomt. Ik doe een action naar dezelfde page die, indien waardn bekend zijn, ook coordinaten en afmetingen laat zien. Die laatste krijg ik dus nooit in beeld.

document.images['cord'].width
document.images['cord'].style.width
document.images('cord').width
images['cord'].width
images('cord').width
cord.width

Allemaal combinaties die ik teneinderaad maar geprobeerd heb om misschien toch een waarde te krijgen. Helaas, ook dat mocht niet baten. Kan ik dit zo doen, of zijn er misschien meer properties van input type='image' behalve die cord_x en cord_y? cord_width werkt iig nie

[ Voor 15% gewijzigd door Kaastosti op 22-07-2003 09:48 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 22 juli 2003 09:54

Acties:

dominic

will code for food

Je zult zowieso de door de browser gerenderde width en height moeten pakken, en denk erom dat deze gegevens pas beschikbaar zijn wanneer het betreffende element gerenderd is (En dus op de pagina staat).

Als je hier eenmaal omheen bent kun je de offsetHeight en offsetWidth of clientHeight en clientWidth van uitlezen.

Download my music on SoundCloud

dinsdag 22 juli 2003 09:55

Acties:

Bosmonster

*zucht*

Het is toch geen image? Het is een submit-button in de vorm van een image.. (bedoeld voor serverside imagemap)

Kun je gewoon aanspreken via document.forms['formnaam'].elements['elementnaam']

dinsdag 22 juli 2003 09:58

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Hmm dus die form name erbij betrekken... ik heb het nu als volgt (vrij basic dus):

HTML:

<html>
<head>
    <title>Test</title>
</head>
<body>

<form action='test.php' method='post' name='form'> 
    <input type='image' src='gps.jpg' name='cord'>
    <script lang='text/javascript'>
        document.write("<input type='hidden' name='width' value='"+document.forms['form'].elements['cord'].width+"'>");
    </script>
</form>
<?
if(isset($_POST['cord_x']) && isset($_POST['cord_y']))
{
    echo $_POST['cord_x']." , ".$_POST['cord_y']."<br>";
    echo $_POST['width']."<br>";
}
?>
</body>
</html>

Ik krijg als melding dat de index 'width' niet bestaat. Kennelijk wordt er bij de post geen variabele met de naam 'width' meegegeven aan de $_POST array. Waaaaarom niet?

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 22 juli 2003 10:06

Acties:

Bosmonster

*zucht*

Om een of andere reden voegt IE6 input type=image niet toe aan het elements-array.

code:

<html>
<head>
<script type="text/javascript">
function checkWidth () {
    alert(document.getElementById('tree').width);
}
onload = checkWidth;
</script>
</head>
<body>
<form>
<input id="tree" type="image" src="tree.gif">
</form>
</body>
</html>

Zo werkt het prima

dinsdag 22 juli 2003 10:17

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

Maar wat nu als ik die waarde mee wil geven aan de form? Ik zal dan toch input type=hidden aan moeten maken binnen die form en daarin die functie uit moeten voeren voor de waarde. Als ik het zo probeer

HTML:

<html>
<head>
    <script type="text/javascript">
    function checkWidth(id)
    {
         return document.getElementById('id').width;
        
    }
        function checkHeight(id)
    {
        return document.getElementById('id').height;
    }
    </script>
</head>
<body>
<form action='test.php' method='post'>
    <input id="gps" name='gps' type="image" src="gps.jpg">
    <input type='hidden' name='width' value='<script>checkWidth(gps)</script>'>
    <input type='hidden' name='height' value='<script>checkHeight(gps)</script>'>
</form>
<?
if(isset($_POST['gps_x']) && isset($_POST['gps_y']))
{
    echo $_POST['gps_x']." , ".$_POST['gps_y']."<br>";
    echo $_POST['width']." x ".$_POST['height']."<br>";
}
?>
</body>
</html>

Dan zit ik in dezelfde situatie als hiervoor. Geen waarde, wel klikbaar plaatje. Coordinaten van het punt van klikken komen er goed door, alleen die breedte en hoogte niet.

[ Voor 22% gewijzigd door Kaastosti op 22-07-2003 10:18 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.

dinsdag 22 juli 2003 10:31

Acties:

Bosmonster

*zucht*

Tijd voor een javascript tutorialtje

tags-in-attributen.. en daar functies aanroepen die alleen een waarde returnen en verder uberhaupt al niks doen... Wat verwachtte je in hemelsnaam van deze code

code:

<script type="text/javascript">
function transferDimensions () {
    var ele = document.getElementById('gps');
    var theForm = document.forms['myForm'];
    theForm.elements['width'].value = ele.width;
    theForm.elements['height'].value = ele.height;
}
onload = transferDimensions;
</script>

En meer dan dit ga ik het niet voorkauwen

dinsdag 22 juli 2003 10:32

Acties:

dominic

will code for food

Kaastosti schreef op 22 juli 2003 @ 10:17:
Maar wat nu als ik die waarde mee wil geven aan de form? Ik zal dan toch input type=hidden aan moeten maken binnen die form en daarin die functie uit moeten voeren voor de waarde. Als ik het zo probeer

HTML:

<html>
<head>
    <script type="text/javascript">
    function checkWidth(id)
    {
         return document.getElementById('id').width;
        
    }
        function checkHeight(id)
    {
        return document.getElementById('id').height;
    }
    </script>
</head>
<body>
<form action='test.php' method='post'>
    <input id="gps" name='gps' type="image" src="gps.jpg">
    <input type='hidden' name='width' value='<script>checkWidth(gps)</script>'>
    <input type='hidden' name='height' value='<script>checkHeight(gps)</script>'>
</form>
<?
if(isset($_POST['gps_x']) && isset($_POST['gps_y']))
{
    echo $_POST['gps_x']." , ".$_POST['gps_y']."<br>";
    echo $_POST['width']." x ".$_POST['height']."<br>";
}
?>
</body>
</html>

Dan zit ik in dezelfde situatie als hiervoor. Geen waarde, wel klikbaar plaatje. Coordinaten van het punt van klikken komen er goed door, alleen die breedte en hoogte niet.

Nogmaals, het kan zijn dat je de height en width van het gerenderde object hebben.. (zie mijn eerdere post)

Download my music on SoundCloud

dinsdag 22 juli 2003 10:34

Acties:

Kaastosti

Vrolijkheid alom!

Topicstarter

ik heb 'm al... die functies er uit geknikkerd en gewoon
document.getElementById('map').width
gebruikt als value bij die hidden input types
Thx voor de hulp!

[ Voor 13% gewijzigd door Kaastosti op 22-07-2003 10:34 ]

Een vergissing is menselijk, maar om er echt een puinhoop van te maken heb je een computer nodig.