This topic contains 4 replies, has 0 voices, and was last updated by  Laptops Daddy 10 years, 6 months ago.

  • Author
    Posts
  • #5595

    Picci
    Participant

    EDIT: all the code dissapeared :S

    i posted it again here: http://rafb.net/p/uvFsjk17.html or here: (if the first one doesn’t work http://www.109.dk/paste/?paste=252 )

    ok..
    i know i’m harassing u ppl with all this html/php/java stuff already from a week

    but there’s 1 last thing i can’t figure out…

    (yes, i know u’ll say there are simpler and more efficient methods to do this.. but this is the only one that seemed to work for me, (even though it doesn’t actually work)…

    let me explain this a bit better:

    there is a menu at the top of a webpage, made up of 5 images…

    |Home|Forum|Gallery…etc…

    i made a copy of all these images and renamed them as follows

    image1.jpg –> image1b.jpg etc…

    then i pulled up the cotrast and lighting of the midtones to get a brighter look on the “b” images.

    now i wanted to make it so that when the mouse is “hovering” or just passing over those 5 images, the images light up (independently of one another)

    the code i managed to copy/edit is the following

    which goes in the HEAD

    and this which goes in the BODY:



    (there are websites under the ***)

    (the code above from the body is for 2 of the 5 images)

    the problem is that none of the image rollovers work 🙁

    by chance, in the following script, the first image actually does roll over, don’t ask me why :S (i can’t see any differences with the above code)

    and


    HELP!

    (if you read till here i can’t thank you enough !, i know it’s long :S )

    #42723

    Laptops Daddy
    Participant

    html/jscript basics dude. there are a thousand sites giving you step by steps. (you mean javascript not java).

    i’ll msg you some code a bit later if you like*. but really, if you can’t write an image replace on mouseover in javascript, you’re probably not gonna be able to use/link that script in html (or write the rest of the page)

    maybe you should start at the beginning? (or is that the beginning?)

    ps:
    tips: divs are the new table. look into xhtml, javascript and css

    *only if you promise to not use it until you completely understand what it does and could do it yourself next time. (you should never copy and paste code without knowing what it does)

    #42724

    Picci
    Participant

    promise !

    btw, i do understand what it does, even though i wouldn’t be able to write it from scratch

    yeah, sorry, i meant javascript…

    btw, if you could send me the code it would be great

    (i’ll use w3schools.com to analyze every bit of it and understand what it does)

    i already signed up for a java online class a few days ago, it starts june 15th

    😉

    and that includes both java and javascript for the web 🙂

    #42725

    Laptops Daddy
    Participant

    K, here you are then. It’s in xhtml/javascript. (I think you should maybe forget html4. xhtml is the modern equivalent)

    http://www2.webng.com/ltdaddy/picci/picci.htm

    I haven’t commented the code, but here are the basics:

    You need to preload the highlighted versions of your images (the swap needs to be instant). So you for, next, increment through them preloading (all, javascript style).

    Next you check that the client browser supports the features you’re about to use (html DOM).

    Then, (this is the bit you were stuck with?)..

    You store your img elements in an array and increment though them assigning a function to each ones mouseover/out event, as well as giving each one a number (with “.number”).

    When the function’s called (when the event occurs), you affect the img element (and its src) with javascripts “this” (you should look it up maybe). You already have your img elements waiting in the array and you access the appropriate one with “this.number”.

    I’ve attached a zip file.

    Ps:
    Try typing “mouseover” in google

    #42726

    Picci
    Participant

    wow,
    thx lt daddy

    that’s a cool way of doing it !

    i fianally got it working the other way, but ur’s is definitely smarter, and now that i need to make a second menu i’ll use what u wrote.

    (as soon as it’s up i’ll show u how it came out)

    i’m also forcing myself to understand every part of the script, 😆
    even though i got the main “meaning” of it. 😕

    thx again

    #42727

    Laptops Daddy
    Participant

    Cool. I’ll look out for it.

    If you want to, you can simplify the script I included a little bit by making better use of “this”…

    var images0 = new Array('image00.png','image01.png','image02.png');
    var images1 = new Array('image10.png','image11.png','image12.png');

    if (document.images)
    {
    var preload = new Array();
    for(i=0; i< images1.length; i++)
    {
    preload = new Image();
    preload
    .src = 'media/'+images1;
    }
    }

    var checkdom = (document.createElement && document.getElementsByTagName);

    window.onload = init;

    function init()
    {
    if (!checkdom) return;

    var imgGroupId = document.getElementById('imgGroupId');
    var imgIds = imgGroupId.getElementsByTagName('img');

    for (var i=0;i<imgIds.length;i++)
    {
    imgIds
    .onmouseover = mouseOverImage;
    imgIds
    .onmouseout = mouseOutImage;
    imgIds
    .number = ;
    }
    }

    function mouseOverImage()
    {
    this.src = 'media/'+images1[this.number];
    this.style.borderColor = '#8AC4FF';
    }

    function mouseOutImage()
    {
    this.src = 'media/'+images0[this.number];
    this.style.borderColor = '#ffffff';
    }

    (It’s pretty much the same, just one less array).

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.