Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

not sure how to do this

Options
  • 19-10-2009 10:15pm
    #1
    jrochie
    Registered Users Posts: 309 ✭✭


    Hi guys,
    I'm working a directory type website. What I want to do is displaying a persons details, ie name, address, telephone number. But I want the number to be hidden behind an image or other text that must be clicked on to display it. Something similar to what is used on goldenpages.ie is what I'm looking for. The info will be pulled from a database, planning on using PHP and mySql.
    Thanks


Comments

  • Options
    #2
    sicruise
    Registered Users Posts: 378 ✭✭sicruise


    I'm not going to start by telling you how to set up a data source or a connection to mysql. A high level of what you will be doing is...

    Create table
    Create object to match table structure
    Create queries to access data

    You will then display only the details less the phone number on the page. The ID from the auto increment value can be used to reference the phone number. You can then use ajax to do a request on click on a link then update the div with the response which will be the phone number.


  • Options
    #3
    jrochie
    Registered Users Posts: 309 ✭✭jrochie


    sorry forgot that, ya no problems with setting up the database or retrieving info from it, just the part with the telephone numbers that i wasnt sure about. thanks for that


  • Options
    #4
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    a bit of css and javascript would do the trick (unless of course you want to hide this securely - eg against scrapers and the like)

    CSS/HTML part:
    Create a container DIV with position:relative and width:x, height:y. Create two child DIVs inside the container both with position:absolute, and width:x, height:y (same height/width as the container). Inside one of those DIV tags place your hidden text. In the other DIV tag place your image. Set z-index:2 on the hidden DIVand z-index:3 on the DIV with the image.

    Preview the above and the text should be hidden.

    Javascript part:
    In the image DIV use the onclick event to change the zIndex of the DIV eg: <DIV onclick="this.style.zIndex=1"></DIV>

    If you want something secure you'll have to use AJAX


  • Options
    #5
    jrochie
    Registered Users Posts: 309 ✭✭jrochie


    i like the idea of changing the z-index but not sure how to do all of that when retrieving from my mysql database. havent used php like this is quite a long time so its taking me a long time to get my head around it, may have to look at some php tutorials to freshen it all up!

    can i use your idea with php?


  • Options
    #6
    egan007
    Registered Users Posts: 2,934 ✭✭✭egan007


    Second result in google php text to image

    http://www.daftlogic.com/projects-text-to-image.htm


  • Advertisement
  • Options
    #7
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    jrochie wrote: »
    i like the idea of changing the z-index but not sure how to do all of that when retrieving from my mysql database. havent used php like this is quite a long time so its taking me a long time to get my head around it, may have to look at some php tutorials to freshen it all up!

    can i use your idea with php?
    Yes of course, the html/css is just output from the php after all so anything you can do with html you can do with php

    Best way to test this out is to forget about the PHP for one moment. Create a HTML page (on your desktop or wherever) using dummy text. Once you get the HTML/CSS and Javascript bits working, just rename the file extension to .php, and replace the dummy text with <?php echo $text_from_database; ?>


  • Options
    #8
    jrochie
    Registered Users Posts: 309 ✭✭jrochie


    thanks for your help. I've been put on pressure to get this done now so haven't time to play around with your way for now. since its just a rush job at the moment im just going to hard code in the numbers as i dont have time to set up the database etc. i want to do it using the onclick event handler but haven't a clue about javascript. how can i set it so that the image changes to the telephone number when it is click?


  • Options
    #9
    ocallagh
    Registered Users Posts: 3,140 ✭✭✭ocallagh


    jrochie wrote: »
    thanks for your help. I've been put on pressure to get this done now so haven't time to play around with your way for now. since its just a rush job at the moment im just going to hard code in the numbers as i dont have time to set up the database etc. i want to do it using the onclick event handler but haven't a clue about javascript. how can i set it so that the image changes to the telephone number when it is click?
    I swore I'd stop posting code.... :rolleyes:
    <html>
<head>
  <title></title>
</head>
<body>
<div style="position:relative;width:200px;height:50px;">
<div style="background:#fff;position:absolute;left:0px;top:0px;width:200px;height:50px;z-index:3" onclick="this.style.zIndex=1">
IMAGE
</div>
<div style="background:#fff;position:absolute;left:0px;top:0px;width:200px;height:50px;z-index:2">
HIDDEN TEXT
</div>
</div>
</body>
</html>

    Ideally you would use a CSS file and style the DIVS using <div class="container"><div class="hidden" .... etc..


Advertisement