Skip navigation
LikeITis2
LikeITis2 Calculating status...
Currently Being Moderated

Replacing images in another DIV - 2nd try

Apr 20, 2012 7:36 PM

Tags: #image #div #images #swap_image #overlay_an_image #div_tag

I have what I think is a simple problem. Unfortunately, it's turning out ot be like pulling my own teeth. 

 

I asked once and was scolded by the Forum Protocol Police for mistakenly submitting without a question and an "improper format". Lets see if I can do it right this time.

 

I don’t know how to use a remote site to upload my page – never heard of such a thing and wouldn’t know where to begin and I believe most wouldnt know – so the FAQ’s regarding that to state this question "properly"cannot be done. And, there is no instruction manual or other info on how to use the tools on this forum or edit and no way to delete (just delete from the forum database - google knows where it can go) so just answer the question if you can.  There were 70+ people that read the other question so I would guess no one wants to answer, no one can answer, or there are a lot of people out there looking for the same answer.

 

I have a single index HTML page that is used as a user’s manual and Help system for a small program.  It is not published to the web but a series of LOCAL HTML files that load from the users local drive.

 

When the user clicks on the HELP button from within the main scripts GUI it brings up their default browser and offers a series of Rollover images (buttons) on the left in a Div (DIV 2 below), A header with a Blank Button below the title in another Div (DIV 1 below), and a Div to swap out the contents on an iframe with an HTML document (DIV 3 below).

 

Basically, when the user clicks on one of the button images in the rollover section (DIV 2) – I want to place an HTML file in the iframe AND swap the image in the header/title section. It is swapping out the html files properly in the iframe but I can’t seem to get the image in the title div to change.  I have tried j-script (not very good at it), using various methods of assigning name and ID properties to everything and using target=””, tried moving the statements inside <a> tags and outside <a> tags, nothing seems to work. It’s a container on the page with an object – you should be able to address it and change it.  Sorry for being a newb - Cant become fair at this without asking questions when stuck and no answers to be found on forum with many hours of searching.  Without answers I cannot learn.

 

PLEASE HELP WITH THIS…   HOW DO YOU…

Replace image in DIV1 with button image selected in DIV2…  and change content of iframe?

 

<!-- DIV 1 -->

<div id="midpanel"> 

 

<p style="font-family:'Arial Black', Gadget, sans-serif; font-size:2.5em;"><img alt="DJ's icon" src="Assets/ICON pictures/EEIconSet148x48.png" style="border:0pt none; padding-left:350px" />Manual<br />

         

<img src="Assets/Screen Objects/Blank yellow button 100x24.png" alt="What is showing in frame below" name="CurrentText" width="121" height="29" id="CurrentText" /></p>

 

</div>

<!-- --------------------------------------------------------------------- ---------------------- -->

<!-- DIV 2 -->

<div id="apDiv1">

<br />

<a href="Manual/DJ OVERVIEW.htm" target="myIframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Overviewbutton','','Assets/Screen Objects/overview1.png',1)" onclick="shownextpic(0)" >

 

<img src="Assets/Screen Objects/overview1 OFF.png" alt="Overview Button" name="Overviewbutton" width="100" height="24" border="0" id="Overviewbutton" />

<!--change the CurrentText image with the Overview image -->

 

</a>

<!-- several more image onmouseover buttons are here but omitted -->

</div>

<!-- --------------------------------------------------------------------- ---------------------- -->

<!-- Select the menu item, load the html page into the iframe, and replace image in Midpanelpage2 with the image you just clicked on. -->

 

<!-- DIV 3 -->

<div id="apDiv2">

<iframe name="myIframe1" id="myIframe1" src="Manual/Welcome to DJs.htm" height="400" width="650" allowtransparency="true" frameborder="0">

 

<p>Your browser does not

    support iframes, please upgrade to a modern browser that does.

</p>

</iframe>

</div>

<!-- --------------------------------------------------------------------- ---------------------- -->

<!--change the "CurrentText" image in div id="midpanelpage2" object id="CurrentText" with the "Overview" image in div id="apDiv1" id="Overviewbutton"   I cant seem to get the image referenced with "CurrentText" to change to the image referenced in apDiv1    HOW DO YOU CHANGE IT?-->

748 Views   5 Replies   Latest reply: codeDawg, Apr 21, 2012 11:58 AM
 
Replies
  • mytaxsite.co.uk
    Currently Being Moderated
    1. mytaxsite.co.uk,
    Apr 20, 2012 8:17 PM   in reply to LikeITis2
    Report

    Please note you can create a test page and then upload it to your own website and then you need to post a link here to that test page.

     

    People here can't read your message or they simply don't understand it because it is too long and very difficult to follow.

     

    I suggest recreate your page and post a link here and then you just need to explain what is wrong with it.  People should be able to help you.

     

    Good luck.

     

    Good Guy

    Website: http://mytaxsite.co.uk

    Website: http://html-css.co.uk

    Forums: http://mytaxsite.boardhost.com

    Email: http://mytaxsite.co.uk/contact-us

     
    |
    Mark as:
  • LikeITis2
    Currently Being Moderated
    2. LikeITis2,
    Apr 20, 2012 11:05 PM   in reply to mytaxsite.co.uk
    Report

    You assume I have a Website.  I do not.

     

    As stated in my original post - This is a local page - information and all HTML material is located on the users local drive.

    So, without a website - I cant get some help with this?  I thought it stated simple enough.  Big Bold Print for the Question...

    HOW DO YOU…  Replace image in DIV1 with button image selected in DIV2

     

    Let me rephrase...

     

    The short bit of code in my original post is the complete function.

     

    Div 1:  load a button under the title

    Div 2: Menu buttons - When one is clicked: load a document in an iframe and change the button in Div 1.

    Div 3: is the iframe

     

    I have no problem with the iframe loading. 

    I cannot get the button in Div 1 to change -

    How can I change the buttom in Div 1 with the buton that was clicked in Div 2?

    (Div 1 image = image from Div 2)

     

    Hows that...

     

    The onClick statement in Div 2 is a leftover from trying to use a j-script - didnt work either.

     
    |
    Mark as:
  • codeDawg
    Currently Being Moderated
    3. codeDawg,
    Apr 20, 2012 11:50 PM   in reply to LikeITis2
    Report

    LikeITis2 - what GoodGuy is trying to tell you is that it is REALLY HARD to give you help without a live site to look at.

     

    That being said, I'll give it a shot.

    The onClick statement in Div 2 is precisely where you want to focus your attention.

    I'm not a javascript expert, but here is a top-level breakdown of what should happen.

    onClick calls the javascript function shownextpic()

    Inside the shownextpic() function you want to set the src of the "CurrentText" image to the url of the image you want to replace it with.

    You will need a line of code that looks something like this:

    CurrentText.src = "localhost/path/to/image/file/newimage.jpg"

     

    Lots of tutorials on the net for swapping images using javascript.

    Try here for starters.

     

    ~codeDawg

     
    |
    Mark as:
  • LikeITis2
    Currently Being Moderated
    4. LikeITis2,
    Apr 21, 2012 11:02 AM   in reply to codeDawg
    Report

    You answer was just what I was looking for - Thank you!

     

    A little playing with the code and found out how it was working. After loading an array with the images I want to use. I place the onClick"var = imageindex"  to call the function when the user clicks on the menu button.  This swaps out the larger button under the title. 

     

    It works great with Chrome and IE but doesnt seem to work in FireFox. 

    Is there a reason this will not work in FireFox?

     

     

     

    <script type="text/javascript">

    function shownextpic(z)

    {

    CurrentText.src = buttonimage[z];

    <!-- buttonimage[z] is array with button images    Same can be done to change ALT text for current button under title-->

    }

    </script>

    <!-- --------------------------------------------------------------------- ----------- -->

    <div id="midpanelpage2">
    <p style="font-family:'Arial Black', Gadget, sans-serif; font-size:2.5em;"><img alt="DJ's icon" src="Assets/ICON pictures/EEIconSet148x48.png" style="border:0pt none; padding-left:350px" />Manual<br />
             
    <img src="Assets/Screen Objects/Blank yellow button 100x24.png" alt="What is showing in frame below" name="CurrentText" width="121" height="29" id="CurrentText" /></p>
    </div>

    <!-- --------------------------------------------------------------------- ----------- -->
    <div id="apDiv1">

    <br />
    <a href="Manual/DJ OVERVIEW.htm" target="myIframe1" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Overviewbutton','','Assets/Screen Objects/overview1.png',1)" onclick="shownextpic(z = 0)";/>

    <!--  z = index number of proper button image in array  z = 0 to 6   with "files" z = 3 -->


    <img src="Assets/Screen Objects/overview1 OFF.png" alt="Overview Button" name="Overviewbutton" width="100" height="24" border="0" id="Overviewbutton" /></a>

    </div>

     

    Help HTML.JPG

     
    |
    Mark as:
  • codeDawg
    Currently Being Moderated
    5. codeDawg,
    Apr 21, 2012 11:58 AM   in reply to LikeITis2
    Report

    Like I said, I'm no javascript expert but you might want to try this:

     

    document.getElementById("CurrentText").src = buttonimage[z];

     

    I seem to recall FF being a little picky about how you select a target.

     

    ~codeDawg

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points