SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why isn't my random image postitioning ?

    Hi everybody,

    I have a javascript that displays a random image whenever the page gets loaded but I can't seem to get the image on the right position...

    I've got
    Code:
    var gallery = new Array();
    gallery[0] = new Array(new Array ("Image_01.jpg", "#01"), new Array ("Image_02.jpg", "#02"));
    
    
    
    function pickImageFrom(whichGallery)
    {
    var idx = Math.floor(Math.random() * gallery[whichGallery].length);
    
    document.write('<IMG STYLE="position:absolute; TOP:105px; LEFT:52px; WIDTH:249px; HEIGHT:150px"><a href="' + gallery[whichGallery][idx][1] + '"><img src="./Images/' + gallery[whichGallery][idx][0] + '"></a>');
    }
    and my h tml file,
    Code:
    <script language="javascript">pickImageFrom(0);</script>
    The image appears in the top left corner of the page and a box with the same size as the image on the correct position, (it's just 4 lines, one pixel wide that draws the shape)

    Is the positioning maybe possible with CSS ?

    Thanks in advance
    Last edited by JamieGreen; Apr 20, 2009 at 10:34.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Yes, the positioning issue is a css-related one. The good people in the css forum will be able to easily resolve that one for you.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for giving me a start but I already know how to position images in CSS, I don't know anything about Javascript.
    So can you please give me one more hint ?

    I think my CSS would be,
    Code:
    #pickImageFrom(0){
    		position: absolute;
    		left: 105;
    		top: 52px;
    		display:block;
    		width: 150px;
    		height: 249px;
    		background: url("../Images/Image_01.jpg") 0 0 no-repeat;
    		}
    and then my h tml (strange I can't type "h tml" in 4 letters without a space?)

    Code:
    <div class="pickImageFrom(0)"></div>
    But this won't work, do I need to ask a solution in the CSS forum?

    Thanks

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That's not a class name, the # shows that it's an identifer instead.

    Identifiers also aren't allowed to use parenthesis in their name.
    http://www.w3.org/TR/html401/types.html#type-name

    ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").
    If the pickImageFrom section will not possibly be used more than one one the page, keep it as an identifier. Otherwise if it's possible for multiple sections to be called pickImageFrom, use a class instead.

    The people in the css forum will be able to expand in much greater depth on the correct application of class names versus identifiers.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Apr 2009
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, don't know what you mean actually, I've got 4 javascripts, each the same only with another number, but I use them like this

    Code:
    <script language="javascript">pickImageFrom(0);</script>
    <script language="javascript">pickImageFrom(1);</script>
    <script language="javascript">pickImageFrom(2);</script>
    <script language="javascript">pickImageFrom(3);</script>
    But then they don't position..

    so I need to go with
    Code:
    .pickImageFrom(0){
    		position: absolute;
    		left: 105;
    		top: 52px;
    		display:block;
    		width: 150px;
    		height: 150px;
    		background: url("../Images/Image_01.jpg") 0 0 no-repeat;
    		}
    but 4 times each with 0 - 3 in the pickImageFrom

    and


    Code:
    <div class="pickImageFrom(0)">
    <a href="./mySite.h tml"></a>
    </div>
    As you said I need to go with a class instead of an identifier. Can't get it working though (very new to html) but now I know that it has to be positioned with CSS, I'll search for some info in the CSS forum.

    Thanks

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    That's a good idea. They'll be able to more effectively teach you about proper use of class names.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •