[SOLVED] How would I insert images please

neilcg1 · April 11, 2009

<input name="checkbox" type="checkbox" id="checkbox" value="checkbox" <?php if ($row[8]) echo 'checked'; ?>

The above code gives me blank check boxes and they become checked if the echo action occurs.

I want to replace the blank check boxes with an Gif image and when the echo occurs the image to change to a different Gif image. I have tried simply replacing checkbox with the images but I have hit a brick wall.

Could someone help please.

ToonMariner · April 11, 2009

what do you need a check box for if you really want an image???

or is this one of those cases where you are replacing a checkbox with an image for presentational purposes?

neilcg1 · April 11, 2009

Yes trying to replace a check box with an image to look better.

Can you help pls.

ToonMariner · April 11, 2009

funnily enough a quick search on google

http://code.google.com/p/jquery-checkbox/

neilcg1 · April 11, 2009

Wow

Thanks I will now spend a few hours trying to work out how to implement this.

But I do appreciate your help and directing me to the site.

Thanks

neilcg1 · April 12, 2009

Sorry being really thick. The jquery website says simply insert a line of code and it changes the check box images on the site.

I have uploaded all the files that came with the download and inserted the code but I just get the line of code in place of the check box not the new images.

Is there somewhere specific on the web page I should insert the line of code?

Thanks

Axeia · April 12, 2009

Could you provide a link to your site? Might be easier to tell that way what you are missing.

neilcg1 · April 12, 2009

Alexia Thanks I will put the code below hope that helps. The url is http://www.autobetpro.com/testtwo.php You can see the check boxes with the odd one checked. But I need them to stand out more hence why I am trying to change.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TML Nano Runners</title>
<style type="text/css">
</style>
<link href="../NHX/CSS/Level1_Verdana.css" rel="stylesheet" type="text/css">
<link href="../NHX/CSS/scb.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style28 {font-size: xx-small}
-->
</style>
</head>
<body>
<?php
$sql_connect = @mysql_connect("213.232.95.7:3306", **********)
// $sql_connect = @mysql_connect("localhost:3306", **************)
or 
die('Could not connect: ' . mysql_error());
mysql_select_db("tml");

$qry = "select distinct r2.name, r.selectionId, m.marketId, v.name, DATE_FORMAT(m.start_time_gmt + INTERVAL 0 SECOND, '%H:%i'), r.ID, r.lay10, r.lay1, r.layed, r.percentage, r2.finishing_position from tml.runners r join capture.markets m on (m.marketId = r.marketId) join venues.venues v on (v.id = m.venue) join capture.runners r2 on (r2.selectionid = r.selectionid AND r.marketid = r2.marketid) where to_days(m.start_time_gmt) = to_days(utc_date)  - if(HOUR(UTC_TIMESTAMP) < 13, 1, 0)  order by m.start_time_gmt"; 
//if(HOUR(UTC_TIMESTAMP) < 14, 1, 0)  order by m.start_time_gmt"; 

//echo $qry;
$rs = mysql_query($qry, $sql_connect);
$heading = "TML Runners";
?>
<div align="center"><span class="Heading"><?php echo $heading?></span></div>
<hr>
<table width="500"  height="20" border=1 align="center" cellpadding=1 cellspacing=0 bordercolor="#777777" bordercolordark="#ffffff" bgcolor="#FFFFCC" class="data_tbl">
<tr>
    <th width="41" bgcolor="#C0C0C0"><div align="center"><span class="style5">Start</span></div></th>
    <th width="102" bgcolor="#C0C0C0"><span class="style5">Venue</span></th>
    <th width="111" bgcolor="#C0C0C0"><span class="style5">Runner</span></th>
    <th width="56" bgcolor="#C0C0C0"><span class="style5">10 Min</span></th>
    <th width="70" bgcolor="#C0C0C0"><span class="style5">1 Min</span></th>
    <th width="53" bgcolor="#C0C0C0"><span class="style5">%age</span></th>
    <th width="37" bgcolor="#C0C0C0"><span class="style5">Lay</span></th>
    <th width="37" bgcolor="#C0C0C0"><span class="style5">Finished</span></th>
  </tr>
    <col width="10">
   <?php
$cnt = 1;
while($row = mysql_fetch_array($rs)) {
?>
  <tr class="small_tbl">
    <form action="" method="post" name="form1">
    </form>
    <td width="41"><?php echo $row[4]?>
      
     <td width="102"><?php echo $row[3]?>
       <td width="111"><div align="center"><?php echo $row[0]?>
     <td width="56"><div align="center"><?php echo $row[6]?>
     </div>
     <td width="70"><div align="center"><?php echo $row[7]?>
         </div>
       <label for="checkbox"></label>
            <div align="center">
              <input type="hidden" name="ID" value="<?php echo $row[5]; ?>" />
              <input type="hidden" name="marketId" value="<?php echo $row[2]; ?>" />
              <input type="hidden" name="selectionId" value="<?php echo $row[1]; ?>" />
        </div>
      <td width="53"><div align="center"><?php echo $row[9]?>
     <td width="37" align="center">
        <input name="checkbox" type="checkbox" id="checkbox" value="checkbox" <?php if ($row[8]) echo 'checked'; ?>
      <td width="53"><div align="center"><?php echo $row[10]?>
    </form>    
  </tr>
       <?php
  $cnt += 1;
  
}

mysql_free_result($rs);
mysql_close($sql_connect);

?>
</table>
<hr>
<center>
  <span class="footer">Copyright(C) NHX Thailand. All rights reserved</span>
</center>

</table>

</body>
</html>/code]

Axeia · April 12, 2009

You don't seem to be loading the javascript anywhere.

Did you look at http://widowmaker.kiev.ua/checkbox/ ? if you view it's source you'll notice he has included no less than 4 external javascript files

		<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="jquery.checkbox.js"></script>
	<script type="text/javascript" src="jquery.checkboxes.pack.js"></script>
	<script type="text/javascript" src="jquery.shiftclick.js"></script>

So that means you'll have to include the same scripts on your page, (and most likely in the same order)

You can grab the checkbox specific js files from http://code.google.com/p/jquery-checkbox/ on the righthand side, and jquery itself from http://jquery.com/

[edit]

Looking at your page you don't seem to be using the checkboxes to submit a form or anything, wouldn't simply displaying an image using the normal <img src="yes.png" alt="" /> be a better way?

Adding a ton of javascript wont do your page load times any good and it doesn't seem nessecary.

Something like:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TML Nano Runners</title>
<style type="text/css">
</style>
<link href="../NHX/CSS/Level1_Verdana.css" rel="stylesheet" type="text/css">
<link href="../NHX/CSS/scb.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style28 {font-size: xx-small}
-->
</style>
</head>
<body>
<?php
$sql_connect = @mysql_connect("213.232.95.7:3306", **********)
// $sql_connect = @mysql_connect("localhost:3306", **************)
or 
die('Could not connect: ' . mysql_error());
mysql_select_db("tml");

$qry = "select distinct r2.name, r.selectionId, m.marketId, v.name, DATE_FORMAT(m.start_time_gmt + INTERVAL 0 SECOND, '%H:%i'), r.ID, r.lay10, r.lay1, r.layed, r.percentage, r2.finishing_position from tml.runners r join capture.markets m on (m.marketId = r.marketId) join venues.venues v on (v.id = m.venue) join capture.runners r2 on (r2.selectionid = r.selectionid AND r.marketid = r2.marketid) where to_days(m.start_time_gmt) = to_days(utc_date)  - if(HOUR(UTC_TIMESTAMP) < 13, 1, 0)  order by m.start_time_gmt"; 
//if(HOUR(UTC_TIMESTAMP) < 14, 1, 0)  order by m.start_time_gmt"; 

//echo $qry;
$rs = mysql_query($qry, $sql_connect);
$heading = "TML Runners";
?>
<div align="center"><span class="Heading"><?php echo $heading?></span></div>
<hr>
<table width="500"  height="20" border=1 align="center" cellpadding=1 cellspacing=0 bordercolor="#777777" bordercolordark="#ffffff" bgcolor="#FFFFCC" class="data_tbl">
<tr>
    <th width="41" bgcolor="#C0C0C0"><div align="center"><span class="style5">Start</span></div></th>
    <th width="102" bgcolor="#C0C0C0"><span class="style5">Venue</span></th>
    <th width="111" bgcolor="#C0C0C0"><span class="style5">Runner</span></th>
    <th width="56" bgcolor="#C0C0C0"><span class="style5">10 Min</span></th>
    <th width="70" bgcolor="#C0C0C0"><span class="style5">1 Min</span></th>
    <th width="53" bgcolor="#C0C0C0"><span class="style5">%age</span></th>
    <th width="37" bgcolor="#C0C0C0"><span class="style5">Lay</span></th>
    <th width="37" bgcolor="#C0C0C0"><span class="style5">Finished</span></th>
  </tr>
    <col width="10">
   <?php
$cnt = 1;
while($row = mysql_fetch_array($rs)) {
?>
  <tr class="small_tbl">
    <form action="" method="post" name="form1">
    </form>
    <td width="41"><?php echo $row[4]?>
     
     <td width="102"><?php echo $row[3]?>
       <td width="111"><div align="center"><?php echo $row[0]?>
     <td width="56"><div align="center"><?php echo $row[6]?>
     </div>
     <td width="70"><div align="center"><?php echo $row[7]?>
         </div>
       <label for="checkbox"></label>
            <div align="center">
              <input type="hidden" name="ID" value="<?php echo $row[5]; ?>" />
              <input type="hidden" name="marketId" value="<?php echo $row[2]; ?>" />
              <input type="hidden" name="selectionId" value="<?php echo $row[1]; ?>" />
        </div>
      <td width="53"><div align="center"><?php echo $row[9]?>
     <td width="37" align="center">
        
     if( $row[8] )
     {
         <img src="images/yes.png" alt="yes" />
     }
     else
     {
          <img src="images/no.png" alt="no" />
     }
      <td width="53"><div align="center"><?php echo $row[10]?>
    </form>   
  </tr>
       <?php
  $cnt += 1;
  
}

mysql_free_result($rs);
mysql_close($sql_connect);

?>
</table>
<hr>
<center>
  <span class="footer">Copyright(C) NHX Thailand. All rights reserved</span>
</center>

</table>

</body>
</html>

neilcg1 · April 12, 2009

Hey Alexia

Thanks for all your help I will try your simplified version and see how I do.

Much appreciated.

Many Thanks.

neilcg1 · April 12, 2009

Hi Alexia

Thanks for all your help, but think I will have to give up on this one as my knowledge is vastly inferior and I can not get it to work.

Will have to stick with the small check boxes I guess.

Thanks for trying to help anyway, very much appreciated.

Axeia · April 13, 2009

Too be frank this is quite easy, if you use the code I posted and make sure there is an 'images' folder containing an image called yes.png and no.png it should already work.

Can't see how you'd have a problem with this if you figured out the rest of the code on your own.

neilcg1 · April 13, 2009

Hi Alexia

Thanks again for your help. To be honest I did not figure the original code. I am a novice at this, I can do very basic html but little more. The code was given to me by the developer of the software programme that feeds this web site. I just wanted to change the check boxes to images so that the presentation stand out more.

I have tried as you suggested, I have used the code you provided and put the images I require named yes.png and no.png into an images file and uploaded it.

What I have now is this:

http://www.autobetpro.com/testthree.php

and the images file with the attached images uploaded.

If you can help further, I would be most grateful.

Thanks

[attachment deleted by admin]

Axeia · April 13, 2009

I see, my bad

Didn't wrap the if / else statement in PHP tags so it's simply put out as text.. forgot to echo them as well..

Try the following instead, replace

     if( $row[8] )
     {
         <img src="images/yes.png" alt="yes" />
     }
     else
     {
          <img src="images/no.png" alt="no" />
     }

with

<?php
     if( $row[8] )
     {
         echo '<img src="images/yes.png" alt="yes" />';
     }
     else
     {
         echo '<img src="images/no.png" alt="no" />';
     }
?>

Simply put <?php and ?> drop you from HTML mode into PHP mode.. which can perform some logic.

In this case it check if $row[8] is true. If it is it displays the yes image.

If it's not, it displays the no image.

neilcg1 · April 13, 2009

Alexia

You are a star let me try new code, I will let you know how I go.

Thanks

neilcg1 · April 13, 2009

Hi Alexia

I must be doing something wrong as its still put out as text.

http://www.autobetpro.com/testthree.php

This is the affect it seems to have generated in the page if that helps

 <span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: 'courier new'; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 15px; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: nowrap; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0; "><span style="color: rgb(0, 0, 187); "><?php<br>     </span><span style="color: rgb(0, 119, 0); ">if( </span><span style="color: rgb(0, 0, 187); ">$row</span><span style="color: rgb(0, 119, 0); ">[</span><span style="color: rgb(0, 0, 187); ">8</span><span style="color: rgb(0, 119, 0); ">] )<br>     {<br>         echo </span><span style="color: rgb(221, 0, 0); ">'<img src="images/yes.png" alt="yes" />'</span><span style="color: rgb(0, 119, 0); ">;<br>     }<br>     else<br>     {<br>         echo </span><span style="color: rgb(221, 0, 0); ">'<img src="images/no.png" alt="no" />'</span><span style="color: rgb(0, 119, 0); ">;<br>     }<br></span><span style="color: rgb(0, 0, 187); ">?></span></span>      <td width="53"><div align="center"><?php echo $row[10]?>
    </form>

Axeia · April 13, 2009

How exactly did you paste it in the document, as it still needs to look like

<?php
     if( $row[8] )
     {
         echo '<img src="images/yes.png" alt="yes" />';
     }
     else
     {
         echo '<img src="images/no.png" alt="no" />';
     }
?>

in the document itself, if you're using some kind of 'fancy editor' look for a "Paste special > Paste text" option, or use a simple texteditor like notepad to avoid the problem.

neilcg1 · April 13, 2009

Alexia

I copied and pasted straight from here so that was the problem, put it in notepad and then copied and it has Worked!!!! eureka.

My yes image is static but if I make that a .apng image it will flash if I am correct.

You are an absoulte star. Is there somewhere on here I can give you some stars or a helpful rating?

Many Thanks

Axeia · April 13, 2009

You already gave me a new nickname, that's more than enough

To be honest I've no idea.. you can however mark this thread, saving others who want to help a read.

If you want it animated you need to use a .gif instead of a .png

neilcg1 · April 13, 2009

Yikes

Sorry Axeia I just noticed the new nickname I gave you.

Anyway, thanks so much for your help.

Sign In

[SOLVED] How would I insert images please

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information