Buying I need a very short HTML code - Toggle image on / off

Discussion in 'Programming' started by mycompanyname, Aug 23, 2010.

0
  1. #1
    This is very simple, I just don't know how it works. I need something in HTML (iphone compatible) that starts off with nothing, and when you click in a certain area, an image appears. This code must be able to work on it's own, without having to reference the head and so on.

    One piece of code (placed in the body upto 10 times)
    This could also be a gif that toggles on and off (play/pause)

    If interested, please give be a timeline and cost. Thanks!:)
     
    mycompanyname, Aug 23, 2010 IP
  2. omarabid

    omarabid Well-Known Member

    Messages:
    1,509
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    130
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #2
    FWIW if you use jQuery

     
    omarabid, Aug 23, 2010 IP
  3. bindassdelhiite

    bindassdelhiite Active Member

    Messages:
    112
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    55
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #3
    If you are still looking for the code then let me know via personal message.

    Thanks and enjoy :)
     
    bindassdelhiite, Aug 23, 2010 IP
  4. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #4
    Hi mycompanyname.
    Sadly I don't have iphone:eek: to simulate this,
    but does the scriopt below suit your need?
    <a href="javascript:void(0)" 
  onclick="this.childNodes[1].style.display='inline'"
  onblur="this.childNodes[1].style.display='none';return false;">
  CLICKME
  <img style="position:absolute; display:none; background-color:yellow; width:100px; height:100px;" />
</a>
    HTML:
    Hendra
     
    hdewantara, Aug 24, 2010 IP
  5. mycompanyname

    mycompanyname Member

    Messages:
    271
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    As Seller:
    100% - 1
    As Buyer:
    100% - 0
    #5
    Where does the image go? I don't understand how to use this...but I really appreciate the feedback! : )
     
    mycompanyname, Aug 24, 2010 IP
  6. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #6
    The image would be shown on right side of CLICKME text.
    Clicking any parts outside CLICKME text should hide the image.

    I just paste the script anywhere inside <body>...</body> tag,
    so on first load my page would look like (in firefox):
    "bla bla bla CLICKME bla bla..."

    Err, I forgot to include the src attribute. Now it should be like:
    <a href="javascript:void(0)"
 onclick="this.childNodes[1].style.display='inline'"
 onblur="this.childNodes[1].style.display='none';return false;">
  CLICKME
  <img [COLOR="red"]src="MYIMAGE.JPG"[/COLOR] style="position:absolute; display:none; background-color:yellow; width:100px; height:100px;" />
</a>
    Code (markup):
    Let me know if this works.
     
    hdewantara, Aug 24, 2010 IP
  7. mycompanyname

    mycompanyname Member

    Messages:
    271
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    30
    As Seller:
    100% - 1
    As Buyer:
    100% - 0
    #7
    Alright, I got the image to show up...is there any way to have the image load in a different area, rather than 'to the right'.

    Also, I can't get it off, once the image is there...there's no way to turn off.
     
    mycompanyname, Aug 24, 2010 IP
  8. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #8
    Okay.
    Try this updated script:

    <a href="javascript:void(0)"
 onclick="[COLOR="red"]this.focus();[/COLOR] this.childNodes[1].style.display='inline';"
 onblur="this.childNodes[1].style.display='none';">
  CLICKME
  <img src="MYIMAGE.JPG" style="[COLOR="royalblue"]margin-left: 50px; margin-top: 50px;[/COLOR] position:absolute; display:none; background-color:yellow; width:100px; height:100px;" />
</a>
    Code (markup):
    Play with the blue margin-left and margin-top attribute above,
    to control image position.

    Hendra
     
    hdewantara, Aug 24, 2010 IP
  9. hdewantara

    hdewantara Well-Known Member

    Messages:
    541
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    As Seller:
    100% - 0
    As Buyer:
    100% - 0
    #9
    So... does it work well now?:)
     
    hdewantara, Aug 25, 2010 IP