Changing Graph Img

Hi I want to change the current image of the order tracking graph (or status bar it shows an img with the progress of it) I want to change the current image and change the status up to 6 (20%, 40%, 60%, 80%, 90% 100%) I already made 7 image for it,

image is like this (just a explanation)

default no hover
first circle hover
2nd circle hover
3rd circle hover
4th circle hover
5th circle hover
last circle hover
code

is it possible each percent “20%, 40%, 60%, 80%, 90% 100%” has his own image if the status or percent is 20 it will show img 20

This is the idea
`<style>
.progress{
width:50px;
height:50px;
}
.class_1{
background-image:url(/images/image1.jpg);
}
.class_2{
background-image:url(/images/image2.jpg);
}
.class_3{
background-image:url(/images/image3.jpg);
}
.class_4{
background-image:url(/images/image4.jpg);
}
.class_5{
background-image:url(/images/image5.jpg);
}
</style>

<?php
/* define your function outside of any loops */
function setimage( $i=0 ){
if( $i>=0 && $i<=20 ) return ‘class_1’;
elseif( $i > 20 && $i <= 40 ) return ‘class_2’;
elseif( $i > 40 && $i <= 60 ) return ‘class_3’;
elseif( $i > 60 && $i <= 80 ) return ‘class_4’;
else return ‘class_5’;
}

/* the portion of your html that displays the graphic percentage representation */
$ReturnString .= “<div id=’progress’ class=’progress “.setimage( $DisplayLength ).”‘></div>”;

?>

Hey Jude,

That’s not quite how the tracking graphic currently works in the plugin. Right now, it takes two images, one empty and one filled, and displayed the % width of the filled one that corresponds to the % complete of a given status.

For example, for a status that is 27% complete would have 27% of the filled image displayed. If you created an empty and a filled image, and then named them the same as the default images for the plugin and uploaded them into the “images” folder of the plugin, it would use your new images instead of the default ones.

Best regards,
EWD

Aw, Can you help me implement that code :(, thats a good idea

Hi Jude,

There would actually be no code to implement. The functionality we described above is how it already works. If you wanted to use your own images, you would just have to create one image that represents the empty status and one that represents that 100% filled status. And then just replace the existing default images in the “images” folder of the plugin.

After you do that, the plugin will automatically display the same percentage of the filled image as the percentage you set for the status for that order.