on mouse over background change in document.write

Question

I need to change the background image on mouseover, but don't know how to do it as it is in a document.write that I did not write. Any help is appreciated. Here is what I have so far. I want B to be whats there normally and MO on the mouseover.

<script type="text/javascript">
function DrawRow (Link,Status) {
    B = "../Images/GreenButton.png" ;
    MO = "../Images/GreenButtonMouseOver.png" ;
    color1 = "#66FF33"; color2="#000000"; color3="#000000"; color4="#000000"; color5="#000000";


    //====================================================================================================================
    //          Check User Defined States By Rule
    //====================================================================================================================

    if ( Status4 )  { B="../Images/BlueButton.png"; MO="../Images/BlueButtonMouseOver.png"; color1="#FFFFFF"; }
    if ( Status32 ) { B="../Images/LightGreenButton.png"; B="../Images/LightGreenButtonMouseOver.png"; C1color="#000000"; }
    if ( Status2 )  { B="../Images/YellowButton.png"; MO="../Images/YellowButtonMouseOver.png"; C1color="#000000"; }
    if ( Status1 )  { B="../Images/OrangeButton.png"; MO="../Images/OrangeButtonMouseOver.png"; C1color="#000000"; }
    if ( Status8 )  { B="../Images/RedButton.png"; MO="../Images/RedButtonMouseOver.png";C1color="#FFFF00"; }
    if ( Status16 ) { B="../Images/PurpleButton.png"; MO="../Images/PurpleButtonMouseOver.png"; C1color="#000000"; }

document.write(  "<td ONCLICK=\"Jump('"+Link+"')\"onmouseover=\"this.style.cursor='hand'\" height='37' width='350' background='"+B+"' ><font color='"+color1+"'><p align='center'><b>"+T+"</b></td>"  );

possible duplicate of [how to change the div background image in mouse over](http://stackoverflow.com/questions/12490054/how-to-change-the-div-background-image-in-mouse-over) — NDM, Aug 02 '13 at 08:58
@NickyDEMaeyer This is not a duplicate, I need to know how to change the mouseover with the specific document.write I have. Because I don't know how. — chriswiec, Aug 02 '13 at 09:01
**possible** duplicate, let the moderators decide. You are requesting that somebody does all the work for you, this is not the purpose of this site. — NDM, Aug 02 '13 at 09:05
@NickyDEMaeyer No i'm asking for help, I need to know how to implement this into my document.write whats your issue anyway, you against people getting help? — chriswiec, Aug 02 '13 at 09:07
How can I change the background using `document.write()` makes absolutely no sense at all. You should think about learning basic javascript first. read a tutorial. — NDM, Aug 02 '13 at 09:09
@NickyDEMaeyer did you even read the question and sample I give? because what I have currently has onmouseover in a document.write what I want to do is also change the background image its nothing I've ever done, I've researched and can't find an example anywhere, so if you're so smart how is it done? — chriswiec, Aug 02 '13 at 09:16
@NickyDEMaeyer Why do people insist on being so rude i'm looking for an answer to a problem, I want to change my background on mouseover inside a document.write like I change the curser. Why insist on battling back and forth, it is why China are fastly becoming world leaders because they would never bicker back and forth just look for the best answer to a question. Its a question there is nothing wrong with it! — chriswiec, Aug 02 '13 at 09:20
I'm not insisting on being rude. Your code example and question just show a lack of basic javascript/css/html knowledge, and I urge you to pick up on that. China has nothing to do with that. — NDM, Aug 02 '13 at 09:26
@NickyDEMaeyer I didn't say China had anything to do with the question, but the script I have works so I just want to include changing the background image on mouse over in my document.write which I can't find an example for anywhere. I don't want to use css I don't want to use divs I want to implement changing the background into what I have. all the answers given and all the answers on the duplicate page you posted don't work in my application! — chriswiec, Aug 02 '13 at 09:30
@NickyDEMaeyer Someone once said if you don't have anything to contribute that is helpful CONTRIBUTE NOTHING! — chriswiec, Aug 02 '13 at 09:53

score 2 · Answer 1 · answered Aug 02 '13 at 10:47

2

Use the below jQuery code which may solve your problem.

Invoke the doit function when you are sure that all your tds are loaded

function doit(){
    //alert(MO);
    //alert(B);
$("td[onclick^='Jump']").each(function(){
    console.log(MO);
    console.log(B);
    $(this).attr("mouseoverpic", MO);
    $(this).attr("mouseoutpic", B);

      $(this).hover(
        function(){
          $(this).attr("background", $(this).attr("mouseoverpic"));
        },
       function(){
         $(this).attr("background", $(this).attr("mouseoutpic"));
        }
     );
 });
}

PS : Have a look at this jsfiddle. Of course I used that for my reference.

answered Aug 02 '13 at 10:47

Niranjan

1,776
1
13
21

how do I put that in the document.write? – chriswiec Aug 02 '13 at 15:39
@chrisw.iec why do you want that to be written with `document.write` where you don't have control over it? Just include that in your `html` code after you make sure the `td`s are loaded. – Niranjan Aug 03 '13 at 06:36
it has to be wriiten with document.write. the doc.write is part of the javascript function. This code pulls data from a database from a piece of software that tells you the results and test times for plating tanks. the onclick jump takes you to the next page to view results the images B and MO are statuses of the tanks themselves test late test 10% over spec that sort of thing. There is no way to pull out the doc.write I don't believe. The guy who wrote this is dead and i'm left to change it and update it. so in the last month I've learned html javascript and css to the best of my knowledge. – chriswiec Aug 03 '13 at 08:50
if you think there is a better way to write the doc.write please show me how! – chriswiec Aug 03 '13 at 08:51
I got this `document.write( "
"+T+"
" );` and I have this for css `.MouseOver{ background:url('../Images/Gray-360-ButtonMouseOver.png'); color:#000000 font-color:#000000; } .BackGround1{ background:+MO+; } .down{ background:url('../Images/Gold-360-ButtonMouseOver.png'); color:#000000 font-color:#000000; }` – chriswiec Aug 03 '13 at 08:54
But I can only load one image not the images from the fubction drawrow like I would want. Its better than nothing, but I would really like to be able to use MO and B it looks like I use MO, but it is only clearing out the .MouseOver so it doesn't display black. – chriswiec Aug 03 '13 at 08:56

score 1 · Answer 2 · answered Aug 02 '13 at 08:55

1

Are you okay with adding some CSS?

<style>
  #somename{
    background-image:url("../Images/Green-360-Button.png");
  }
  #somename:hover{
    background-image:url("../Images/Green-360-ButtonMouseOver.png");
  }
</style>

And add id="somename" to the <td>

answered Aug 02 '13 at 08:55

Grallen

1,620
1
17
16

ya most the page uses css in the html but all the javascript is functions and in document write. So how do I incorporate that into the document write replacing the background '"=B"' with background '"MO"' – chriswiec Aug 02 '13 at 08:58
it doesn't work in the document.write I have I thought it might but it doesn't. – chriswiec Aug 02 '13 at 09:34

score 1 · Answer 3 · answered Aug 02 '13 at 08:56

1

If your div is like this

 <div id="div_1"></div>

then you can use style

#div_1:hover{ 
//your style for image
}

answered Aug 02 '13 at 08:56

Bindiya Patoliya

2,726
1
16
15

There is no div and wouldn't know how to add it to the document.write with which I have no experience. – chriswiec Aug 02 '13 at 09:02
document.write( "" ); – Bindiya Patoliya Aug 02 '13 at 09:06
the document.write is part of a javascript function. So my css style section is after the function. Does that matter? So I put that right after what? ` document.write( "
"+T+"
" );` – chriswiec Aug 02 '13 at 09:13
You can write like this document.write( " – Bindiya Patoliya Aug 02 '13 at 09:15
where do I put the div? I can't put it in the html because the document.write is part of the JavaScript function DrawRow – chriswiec Aug 02 '13 at 09:23
i know it is in function.but you can add '' in before td start. – Bindiya Patoliya Aug 02 '13 at 09:43
and where doe the div tag go? do you have an example of how the div tag would go in the document.write with the other components in the document.write? can I just change the whole style to css from html any examples would be greatly appreciated! – chriswiec Aug 02 '13 at 09:56
1

i will make demo in few mins. – Bindiya Patoliya Aug 02 '13 at 09:59
its just ruff overview for how to use – Bindiya Patoliya Aug 02 '13 at 10:21
so inside the div tags I put the current data I have? `ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.cursor='hand'\" height='37' width='133' align='right' background='"+eeo+"' >
"+eee+"`
– chriswiec Aug 02 '13 at 10:29
what are all the meta tags for they won't screw up the current javascript refresh I have will they? I have a no scroll refresh tag that is important! – chriswiec Aug 02 '13 at 10:31
I tried this, but it doesn't work `document.write( "
ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.cursor='hand'\" height='37' width='350' background='"+B+"' >
"+T+"
" );` what am I doing wrong? – chriswiec Aug 02 '13 at 10:41
No its default in HTML type pages,so not necessary for you. – Bindiya Patoliya Aug 02 '13 at 10:42
Also if its possible if you look at the top of my question and my document.write I need to change the background from '"+B+"' to '++MO+"' The current status will change the image as it already does with the current background. You're help is greatly appreciated! – chriswiec Aug 02 '13 at 10:43
You have write onclick event outside div tag – Bindiya Patoliya Aug 02 '13 at 10:44
try this.document.write( "
"+T+"
" ); – Bindiya Patoliya Aug 02 '13 at 10:44
but the onlick is inside the div tag still do I put it after the style tag or before what about the onmouseover? Your post seems identical to mine? – chriswiec Aug 02 '13 at 10:50
there is no Jump method ,so remove ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.cursor='hand'\" and for that add 'cursor:pointer' in hover style. – Bindiya Patoliya Aug 02 '13 at 10:52
the jump method is pretty important it links the background image or button you're pushing to the next page. I left the top scripts out on accident ` ` These were on top of the function. In function draw row there is link and it links it to the next page. – chriswiec Aug 02 '13 at 10:57
I'm really sorry i'm so lost can you show me what to put in the css and what to put in the doc.write i'd like to take the old styling completely out of the doc.write, but not quite sure how. So far I've gotten nothing to work trying different things for two days. I promise I've tried numerous things before begging here! – chriswiec Aug 02 '13 at 10:59
Use it document.write( "
"+T+"
" ); – Bindiya Patoliya Aug 02 '13 at 11:30

score 1 · Answer 4 · answered Aug 02 '13 at 09:10

1

you can use this syntex :

onmouseover="changeImage(this.id);"
 create a function like this :

    <script language="javascript" type="text/javascript">
    function changeImage(id)
    {
       $('#'+id).css("background-image", "url(your image path)");
    }

    </script>

you must include jquery.js

answered Aug 02 '13 at 09:10

Mukesh Dabhi

85
1
10

how do I implement that into my document.write? – chriswiec Aug 02 '13 at 09:21

score 0 · Accepted Answer · answered Aug 05 '13 at 06:18

Finally figured it out here is what I had to do pretty simple, it just took 3 days of trying functions, using stylying sheets then I got this! Thanks everyone for their help I upvoted all for contributing!

    document.write(  "<td ONCLICK=\"Jump('"+Link+"')\" onmouseover=\"this.style.background='url("+M+")'; this.style.cursor='pointer';\" onmouseout=\"this.style.background='url("+B+")';\" onmousedown=\"this.style.background='url(../Images/Gold-360-ButtonMouseOver.png)'\"  height='25' width='350' background='"+B+"' ><p align='center'><font color='"+C1color+"'><b>"+T+"</b></td>"  );

on mouse over background change in document.write

5 Answers5

you must include jquery.js