SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Resize all pictures

    I have the following code:

    Code JavaScript:
    	function showpreview(title,description){
    		currentimageheight = 120;
     
    		document.onmousemove=followmouse;
     
    		newHTML = '<dl>';
    		newHTML = newHTML + '<dt>' + title + '</dt>';
    		newHTML = newHTML + '<dd>' + description + '</dd>';
    		newHtml = newHTML + '</dl>'
    		getpreviewobjnostyle().innerHTML = newHTML;
    		getpreviewobj().visibility="visible";
    	}

    And i want that javascript resizes all pictures that appear inside the newHTML variable.

    For example, if description = "<img src="supergiantpicture.jpg">" i want javascript to add or edit the height and width tags of all img tags inside description.

    How can i do that?

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2006
    Location
    Sweden
    Posts
    451
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You really shouldn't resize images in javascript, since the whole picture will load anyway. And it will take some time, even if you set the width to 100px. You should resize the images on the server and then display them.

  3. #3
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know, but that pictures wont be stored anywhere in the server, and they will be inputed by users.

    But i dont want them to have more that 200x200px in size.

    So, without having an Id, because users wont put Ids, how can i resize the pictures inside that variable's html code?

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Wrap the entire section that their code is inserted into inside a div with an id.

    Use document.getElementById to get the div.
    Use getElemensByTagName('img') within that div to get an array of all of the images that they entered.
    Loop through that array to change the width and height as required.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict Mr Jojo's Avatar
    Join Date
    May 2007
    Posts
    322
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    nice! thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •