mouseover and onclick swap an image

Question

Asan23 0 Newbie Poster

11 Years Ago

im trying to do a mouse over and a onclick swap imag and i cant seem to get the code right and working

here is my html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>assignment 2 cis 154</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="jsfile.js" rel="stylesheet" type="text/javascript" />

<script src="jsfile"></script>

<script>
    $(document).ready(function(){

    }); //end ready
</script>

</head>

<body>

<h1 onclick="imgover">Greatest Movies Of All Time</h1>

    <p id="image"><img src="Images/superman_super.jpg" width="281" height="140" alt="superman shield" name="superman_super" />
    </p>

<br />
<br />

    <ul id="movielist">
<li><a href="http://www.imdb.com/title/tt0078346/" title="Superman IMDB" target="_blank">Superman Trilogy</a></li>
        <li><a href="http://www.imdb.com/title/tt0076759/" title="Star Wars IMDB" target="_blank">Star Wars Trilogy</a></li>
        <li><a href="http://www.imdb.com/title/tt1119646/" title="Hangover IMDB" target="_blank">HangOver</a></li>
</ul>
<br />
<br />

<p id="moviesum">
   <strong>Superman:</strong><br />
   An alien orphan is sent from his dying planet to Earth, where he grows up to become his adoptive home's first and greatest super-hero.
<br />
<br />
      <strong>Star Wars:</strong><br />
Two Jedi Knights escape a hostile blockade to find allies and come across a young boy who may bring balance to the Force, but the long dormant Sith resurface to reclaim their old glory. Ten years later, Anakin Skywalker shares a forbidden romance with Padmé, while Obi-Wan investigates an assassination attempt on the Princess and discovers a secret clone army crafted for the Jedi. After three years of fighting in the Clone Wars, Anakin Skywalker falls prey to the Sith Lord's lies and makes an enemy of the Jedi and those he loves, concluding his journey to the Dark Side. Luke Skywalker, a spirited farm boy, joins rebel forces to save Princess Leia from the evil Darth Vader, and the galaxy from the Empire's planet-destroying Death Star.
<br />
<br />
      <strong>HangOver:</strong><br />
A Las Vegas-set comedy centered around three groomsmen who lose their about-to-be-wed buddy during their drunken misadventures, then must retrace their steps in order to find him.
<br />

</p>



</body>
</html>

here is my javascript

// JavaScript Document

$(document).ready(function(){

    $("#movielist").onmouseover(function(){
        $(this).css("background-color","#000000");
        }); //end mouseover

    $("#movielist").onmouseout(function(){
        $(this).css("background-color","#ffffff");
        }); // end mouseout

    $("#moviesum").mouseover(function(){
        $("#moviesum#").css("color","#000000");
        }); // end mouseover

    $("moviesum").mouseout(function(){
        $("#moviesum").css("background-color","#ffffff");
        }); // end mouseout
}); //end ready


// click on <h1> load image try 1
superman_super = new Image()
superman_super.src = "superman_super.jpeg"

onClick="javascript:void(document.River = superman_super.src)"



// click on <h1> load image try 2
superman_super = "on.jpeg"  
starwars = "off.jpeg"

function imgover(superman_super){
     superman_super.src = superman_super
}

function imgout(starwars){
     starwars.src = starwars
}

and thoughs of whats wrong is it my <link> or is it the jsfile that is wrong

javascript

2 Contributors
4 Replies
778 Views
1 Day Discussion Span
Latest Post 11 Years Ago Latest Post by radow

All 4 Replies

radow 7 Junior Poster in Training

11 Years Ago

For change a image hover use following code

$(document).ready(function(){
    $("dsd").hover(
        function()
        {
            $(this).attr("src","on.jpeg");
        },
        function()
        {
            $(this).attr("src","off.jpeg");
        }
    );
    })

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Asan23 0 Newbie Poster · Answer 1 · 2012-11-14T05:33:50+00:00

ithanks for you how radow. i was able to get the mousover to work. i am still having trouble loading it from and external js file two i still havent figured out how to swap and image on my html page when i click on the text. this is what i have so far i dont know which is right on to use

html section

<h1 onclick="click">Greatest Movies Of All Time</a></h1>

<p id="image"><img src="superman_super.jpg" width="244" height="121" alt="superman shield" />
    </p>

this is my js file

        $("h1").click(function(){
                $(this).attr(src="superman_super","on.jpeg");
                $(img).show();
            },
        function(){
                $(this).attr(src="starwars","off.jpeg");
                $(img).hide();
                });

i want to be able to click on "greatest movies of all time" and swap out the image i have on my webpage

is that possible

Asan23 0 Newbie Poster · Answer 2 · 2012-11-14T05:37:49+00:00

also code below what i found googling swaping and image

// click on <h1> load image try 1
superman_super = new Image()
superman_super.src = "superman_super.jpeg"

onClick="javascript:void(document.River = superman_super.src)"



// click on <h1> load image try 2
superman_super = "on.jpeg"  
starwars = "off.jpeg"

function imgover(superman_super){
     superman_super.src = superman_super
}

function imgout(starwars){
     starwars.src = starwars
}

radow 7 Junior Poster in Training · Answer 3 · 2012-11-14T07:48:49+00:00

For to change image a ckick you can use following code

<h1 id="show_movie" onclick="click">Greatest Movies Of All Time</a></h1>
<p id="image">
    <img id="swap_img" src="superman_super.jpg" width="244" height="121" alt="superman shield" />
</p>



<script type="text/javascript">
    var movie_aimgs = ["superman_super.jpg","dsadada.png","123.png"];
</script>
<script type="text/javascript">
$(document).ready(function()
{
    $("#show_movie").click(function()
    {

        var curIndex = movie_aimgs.indexOf($("#swap_img").attr("src"));

        if((curIndex+1)>=movie_aimgs.length)
        {
            curIndex = -1;
        }

        $("#swap_img").attr("src", movie_aimgs[curIndex+1]);
    });
})          

</script>

mouseover and onclick swap an image

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers