JavaScript - How To Extract Url From Backgroundimage?

Hi

i have a div box with some menu links as text. i need to change the background image of the whole div when i mouseover it and need to bring the original image when i mouseout it.

i have used a javascript to do this. and here is my code

<style type="text/css">
#test {
background-image:url(home.gif);

width:100%;
}
</style>

<script type="text/javascript">
function changeBgImage (image, id) {
var element = document.getElementById(id);
element.style.backgroundImage = "url("+image+")";
}
</script>

<table width="100%" height="305" border="0" cellpadding="0" cellspacing="0" onMouseOver="changeBgImage('home1.gif', 'test1')" onMouseOut="changeBgImage(home.gif, 'test1')" id="test1">


this works fine but when i hover text links which is in the div, the background image flickers on mouseout in ie6.

How to overcome this.

Hi there,
I have two textboxes and I want some images to be displayed in my textboxes randomly
if randomNumber==1 let textbox1/textbox2 backgroundimage change and if randomnumber==2
let textbox1 backgroundimage change again.
I think I need some fixing in the following lines:
document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';");

Thanks for any help..


PHP Code:




<script>
 setInterval("showimages()",500);
function showimages()
{
var rno=Math.floor(Math.random()*2)+1;
document.getElementById("box1").value=rno;
if(rno==1){

document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(1.jpg)';");
document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(2.jpg)';");
}
if(rno==2){

document.getElementById("txtbox1").Attributes.Add("this.style.backgroundImage = 'url(3.jpg)';");
document.getElementById("txtbox2").Attributes.Add("this.style.backgroundImage = 'url(4.jpg)';");
}

}
</script>
<input type="text" id="txtbox1" style="position:absolute;top:200px;left:200px;height:150px">
<input type="text" id="txtbox2" style="position:absolute;top:200px;left:500px;height:150px">
<input type="text" id="box1" style="position:absolute;top:100px;left:100px;width:40px;">
<input type="button" onclick='location.reload()' style="position:absolute;top:20px;left:100px;"> 

Hi every1,

i am quite new to java-script programming.

i created two images , one to display when during 'event.mouseout' and the other during mouseover
Both images are the background images of a td element.

I created a javascript :

document.getElementById('bg_image').style.backgroundImage=url('sample.gif');

it works fine in Internet Explorer but doesnt in mozilla or opera

thanx in advnc 4 any1 who wants ta help me.

I am working on a simple movie database to practise my JavaScript and have encountered difficulty extracting information from the xml file. Let me explain my scenario. Sorry if it gets a bit long-winded!

The interface I have created has three columns which each serve the following functions:

Column 1 -> The user selects a film of their choice.

Column 2 -> Once the user has selected a film in Column 1 then more information about the film appears in this column. This includes title, director and cast. The user has the option of then selecting a cast member to find out information about them.

Column 3 -> Once the user has selected a cast member in Column 2 then their name and a picture of them appears in this column (using the <img> tag). This information in this column also includes the film title, film artwork (applied <img> tag).

But the difficulty I have encountered is as follows - I have a rough idea of how to update column 2 in real time to reflect the changes in Column 1.

The method I am using for acquiring the relevant information in Column 2 is creating an array then using the indexOf to retrieve a the details of a specific film. I know this method is wrong and it would be better to pull the relevant information from the xml file.

How do I use the idx from the Column 1 selection to pull out the relevant information to put in Column 2 and 3?

Here is what I've done so far:

Code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function XMLload() {
    jQuery.post(url, function(data) {getxml(data)}, 'xml');
}

function dataFromTag(node, t) {
    var d = node.getElementsByTagName(t);
    if (d.length == 0) return ('');
    return (d[0].firstChild.nodeValue);
}

jQuery(document).ready(function() {XMLload();});

var url = 'movie.xml';

var xmlMovies;
var aryMovieList = [];
var xmlActors;
var aryActors = [];
var iframeOpen = '<html><head><\/head><body>'
var iframeClose = '<\/select><\/form><\/body><\/html>'

function getxml(xmldoc) {
    xmlMovies = xmldoc.getElementsByTagName('movie');
    var hstr = iframeOpen;
    hstr += '<select size="' + xmlMovies.length + '" onchange="parent.actors(this.selectedIndex);">';
    for (var MovieID = 0; MovieID < xmlMovies.length; MovieID++) {
        aryMovieList[aryMovieList.length] = dataFromTag(xmlMovies[MovieID], "title");   
        xmlActors = xmlMovies[MovieID].getElementsByTagName("actor");

        for (var ActorID = 0; ActorID < xmlActors.length; ActorID++) {
            aryActors[aryActors.length] = dataFromTag(xmlMovies[MovieID], "director") + "/" + dataFromTag(xmlMovies[MovieID], "title") + "/" + dataFromTag(xmlActors[ActorID], "name");
        }

        hstr += '<option>' + aryMovieList[MovieID] + '<\/option>';
    }
    hstr += iframeClose;

    // test for aryMovieList
    // alert(aryMovieList);
    // test for aryActors
    // alert(aryActors);

    with(document.getElementById('movies').contentDocument) {
        open();
        write(hstr);
        close();
    }
}

function actors(idx) {  
    var hstr = iframeOpen;
    var selectActor = [];
    hstr += 'title: ' + dataFromTag(xmlMovies[idx], 'title');
    hstr += '<br>';
    hstr += 'director: ' + dataFromTag(xmlMovies[idx], 'director');
    hstr += '<br>';

    for (var i = 0; i < aryActors.length; i++) {
        var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
        if (aryActorList >= 0) {
            selectActor[selectActor.length] = i;
        }
    }

    // alert(selectActor);

    hstr += '<select size="' + selectActor.length + '" onchange="parent.info(this.selectedIndex);">';

    for (var i = 0; i < aryActors.length; i++) {
        var aryActorList = aryActors[i].indexOf(dataFromTag(xmlMovies[idx], 'director') + '/' + dataFromTag(xmlMovies[idx], 'title'));
        if (aryActorList >= 0) {
            hstr += '<option>' + aryActors[i].substring(aryActors[i].lastIndexOf("/") + 1) + '<\/option>';
        }
    }

    hstr += iframeClose;

    with(document.getElementById('actors').contentDocument) {
        open();
        write(hstr);
        close();
    }
}

function info(idx) {
    var hstr = iframeOpen;
    hstr += '';
    hstr += iframeClose;

    with(document.getElementById('info').contentDocument) {
        open();
        write(hstr);
        close();
    }
}
</script>
</head>

Here is the XML file in use:

Code:

<movies>
    <movie>
        <title>Match Point</title>
        <director>Woody Allen</director>
        <image>Match-Point.jpg</image>
        <actor>
            <name>Scarlett Johansson</name>
            <image>Scarlett-Johansson.jpg</image>
        </actor>
        <actor>
            <name>Brian Cox</name>
            <image>Brian-Cox.jpg</image>
        </actor>
        <actor>
            <name>Matthew Goode</name>
            <image>Matthew-Goode.jpg</image>
        </actor>
        <actor>
            <name>Penelope Wilton</name>
            <image>Penelope-Wilton.jpg</image>
        </actor>
    </movie>
    <movie>
       <title>Inception</title>
        <director>Christopher Nolan</director>
        <artwork>Inception.jpg</artwork>
        <actor>
            <name>Leonardo DiCaprio</name>
            <image>Leonardo-DiCaprio.jpg</image>
        </actor>
        <actor>
            <name>Ken Watanabe</name>
            <image>Ken-Watanabe.jpg</image>
        </actor>
        <actor>
            <name>Joseph Gordon-Levitt</name>
            <image>Joseph-Gordon-Levitt.jpg</image>
        </actor>
        <actor>
            <name>Marion Cotillard</name>
            <image>Marion-Cotillard.jpg</image>
        </actor>
        <actor>
            <name>Ellen Page</name>
            <image>Ellen-Page.jpg</image>
        </actor>
        <actor>
            <name>Tom Hardy</name>
            <image>Tom-Hardy.jpg</image>
        </actor>
    </movie>
    <movie>
        <title>Blade II</title>
        <director>Guillermo del Toro</director>
        <artwork>Blade-II.jpg</artwork>
        <actor>
            <name>Wesley Snipes</name>
            <image>Wesley-Snipes.jpg</image>
        </actor>
        <actor>
            <name>Kris Kristofferson</name>
            <image>Kris-Kristofferson.jpg</image>
        </actor>
        <actor>
            <name>Ron Perlman</name>
            <image>Ron-Perlman.jpg</image>
        </actor>
        <actor>
            <name>Leonor Varela</name>
            <image>Leonor-Varela.jpg</image>
        </actor>
        <actor>
            <name>Norman Reedus</name>
            <image>Norman-Reedus.jpg</image>
        </actor>
    </movie>
    <movie>
        <title>Pulp Fiction</title>
        <director>Quentin Tarantino</director>
        <artwork>Pulp-Fiction.jpg</artwork>
        <actor>
            <name>John Travolta</name>
            <image>John-Travolta.jpg</image>
        </actor>
        <actor>
            <name>Samuel L Jackson</name>
            <image>Samuel-L-Jackson.jpg</image>
        </actor>
        <actor>
            <name>Uma Thurman</name>
            <image>Uma-Thurman.jpg</image>
        </actor>
        <actor>
            <name>Harvey Keitel</name>
            <image>Harvey-Keitel.jpg</image>
        </actor>
    </movie>
        <movie>
        <title>Avatar</title>
        <director>James Cameron</director>
        <artwork>Avatar.jpg</artwork>
        <actor>
            <name>Sam Worthington</name>
            <image>Sam-Worthington.jpg</image>
        </actor>
        <actor>
            <name>Zoe Saldana</name>
            <image>Zoe-Saldana.jpg</image>
        </actor>
        <actor>
            <name>Stephen Lang</name>
            <image>Stephen-Lang.jpg</image>
        </actor>
        <actor>
            <name>Michelle Rodriguez</name>
            <image>Michelle-Rodriguez.jpg</image>
        </actor>
    </movie>
</movies>

Many thanks in advance!

If I wanted to extract certain parts of the URL... how can I do this? I know how to extract the entire URL or just the search query but what if i want to do this


/boxscore.asp?w=2&s=4&yr=


Just extract the numbers 2 and 4 from the url. I want to make a new link for this site I am on to plug those 2 numbers into here

/game.asp?gnum=2&gslot=4

That's basically what i want the new window to read.