jQuery help loading images

Discussion in 'JavaScript' started by frafra, Nov 23, 2013.

0
  1. #1
    This is my first jQuery program and boy am I having trouble. My first question: when I am trying to load images should I have the images separate in the root folder? I am trying to load five images with "title" to them and mouseenter and mouseleaving for them. At first I had all the images separate in the root folder but I also made a xml file with the images and titles in it. I just do not know. I also don't know if I have my HTML file done correctly. Could someone please explain this to me. I would really appreciate it and thank you. I have my images saved as "img1.png" and so on.Here is my code. I am sure that I probably have a mess of it.

    <!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js>
    </script>
    <script>
    var img = new Image();

$(document).ready(function(){
    $("img").load(file///C:/inetpub/wwwroot/pictures.xml) {
    $("#img1").mouseenter(function(){
    $("#p1").css("background-color","yellow");
    }
    $("#img1").mouseleave(function(){
    $("#p1").css("background-color","lightgray");
    }
    $("#img2").mouseenter(function(){
    $("#p2").css("background-color","yellow");
    }
    $("#img2").mouseleave(function(){
    $("#p2").css("background-color","lightgray");
    }
    };

</script>
</head>
<body>

<p1>Roman Numeral One</p1>
<p2>Roman Numeral Two</p2>
//<p3>Roman Numeral Three</p3>
//<p4>Roman Numeral Four</p4>
//<p5>Roman Numeral Five</p5>

</body>
</html>
    HTML:
     
    frafra, Nov 23, 2013 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Okay, first of, there are no <p1> <p2> etc html elements. It's <p> - no numbers. And you select each of them by traversing the DOM, or add an ID to each element.

    Second, I'm not entirey sure what you wanna do - you have no images present in your code - do you want to load an image on mouseover? Or...?
     
    PoPSiCLe, Nov 24, 2013 IP
  3. frafra

    frafra Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #3
    Thanks for the info and I am wanting to load the five images that are in my wwwroot folder.
     
    frafra, Nov 24, 2013 IP
  4. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #4
    Yes, but load them how - do you just want them on your page? If so, why not just code them into the page in HTML.

    Or, do you want a javascript that loads any amount of pictures into a page?
    Or, are you wanting the images to only show/load when a user hovers over them?

    You need to be a bit more specific.
     
    PoPSiCLe, Nov 24, 2013 IP
  5. frafra

    frafra Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    1
    #5
    OK I am trying replace the ajax calls in the program with jQuery. Can someone explain to me how to do this. Please and Thank You
    <!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript">
            var request;
           
            function getContent(url)
            {
                request = new XMLHttpRequest();
               
                request.onreadystatechange = stateChange;
                request.open("GET", url, true);
                request.send(null);
            }
           
            function stateChange()
            {
                if (request.readyState == 4 &&
                    request.status == 200)
                    {
                        document.getElementById("content").innerHTML =
                        request.responseText;
                    }
            }
           
            function clearContents()
            {
                document.getElementById("content").innerHTML = "";
            }
        </script>
    </head>
    <body>
    <header>
        <h1>AJAX</h1>
    </header>
        <img src="one.png"
        onmouseover="getContent('one.html')"
        onmouseout="clearContents()" />
        <img src="two.png"
        onmouseover="getContent('two.html')"
        onmouseout="clearContents()" />
        <img src="three.png"
        onmouseover="getContent('three.html')"
        onmouseout="clearContents()" />
        <img src="four.png"
        onmouseover="getContent('four.html')"
        onmouseout="clearContents()" />
        <img src="five.png"
        onmouseover="getContent('five.html')"
        onmouseout="clearContents()" />
        <div id="content" style="border: 1px solid black; padding: 10px">
       
        </div>


</body>
    HTML:
     
    frafra, Nov 26, 2013 IP
  6. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #6
    My question on the code in the first post would be why are you using javascript to do CSS' job?

    As to the second one, why are you pissing away accessibility with script-tard ajaxtardery? Pageloads aren't evil.... much less the headache of hover states mated to show/hide Ajax, something that REALLY shouldn't EVER be done on a website in the first place.
     
    deathshadow, Nov 26, 2013 IP