i start working on new project and i have task-make color for button, what have href on current page.
Buttons there. And in that project that all buttons just image!
<map id="schemaMap" name="schemaMap">
<? for ($i=0;$i<3;$i++):?>
<area shape="<?php echo $shape ?>"
coords="<?php echo $coords[$i] ?>"
<? if ($curretAction == $action [$i]):?>
onclick ="return false;"
<? else: ?>
href ="<?php echo $links[$i] ?>"
<? endif; ?>
alt ="<?php echo $this->translate($alt[$i]); ?>"
/>
<? endfor;?>
</map>
And now i don't know how make that part of image with color. Any ideas?
To change the colour of your buttons you'll need to create some new images with different colour buttons that you can substitute when the buttons are clicked.
You can create a whole new image with each button in a different colour as you need (slow!) or you can slice the image up into smaller parts and create new images just for the buttons.
Once done, and you have created HTML to reassemble the parts on the page you'll need some javascript to change the button images onClick, or your PHP will have to generate a new page with the right buttons.
Either way, start with the image and a graphics program.
As an afterthought, you might be able to do this with HTML Canvas elements, but that's a whole different approach!
Related
So I didn't found what I was looking for in last two days.
To be clear I have a table "tracks" in my database.
So I can show from "tracks" the "demo" field wich is an audio file "url"..
<?= $tracks['demo']; ?>
I have multiple url's but then I need to replace the a href
<a href="<?php echo $tracks['demo'];?>"
in a logical way.
In simple terms it's like I want to click on button 1 that loads
url 1 into this a href with the ID, title field from that track.
When you press button 2 you need to load another url and replace url 1 with url2.
I tried many ways including javascript but it won't work.
Problem now is that when I list 4 items it always loads the latest "URL" i have posted in my source code. :)
When I echo out <?php echo $tracks['demo]; ?> on all items I can see the correct url's so the functionality to replace the url is my issue.
* I basically want to load many mp3 url's in a player I made in the footer of my website. It works by hardcoding the urls in the url field but this is not what it should be... *
Code:
<?php while($tracks = mysqli_fetch_assoc($muziek)) : ?>
<div class="col-md-2 viny" id="muziek">
<h4><?= $tracks['title']; ?></h4>
<img src="<?= $tracks['img']; ?>"
alt=" <?= $tracks['title']; ?> />
<p class="artist">Artist: <?= $tracks['artist']; ?></p>
</div>
<?= $tracks['demo'] = $audiourl ; ?>
<button type="button" onclick="play">Play</button>
</div>
<?php endwhile; ?>
*THIS LOOPS PERFECT FOR ALL ITEMS TRACKS ARE LISTED PERFECT *
In my player I have
<a href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
function play(){
I'm not good at JS... And this is my issue because it now loads the latest output from the php loop...
}
I don't know how you are replacing it but
Why not pass the audio in the function. Here like this
<button type="button" onclick="play(<?= $tracks['demo'] = $audiourl ; ?>)">Play</button>
assign a id to anchor tag
<a id="someId" href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
and in the play function, you receive it like this
function play(audioUrl){
}
and change the href like this in the play function
If you are using jquery
$('#someId').attr("href", audioUrl);
sometimes the above does not works. Can't remember why but if that does not works try this
$('#someId').href = audioUrl
If you are using javascript
document.getElementById('abcd').href = audioUrl
So I tried many things but I had many issues with the player it's js file using the same id's and so on.
The new logic I tried out seems to work:
<form action="" method="POST">
<input type="submit" value="Play" name="Play">
</form>
<?php
if (isset($_POST["Play"]))
{
echo $tracks['demo'];
}else{
echo ' ';
}
?>
There is more going on but I tried to write it down as simple as this to show the logic. All Track url's are hidden and when the page loads there is an empty $audiourl by default loaded in the a href from my audioplayer. By clicking the button play I show the url in the source but not on the site.
Then the latest $audiourl variable changes to this value.
I'm working on task of share a link on facebook. But I want to display my own static image (independent of url). With help of google and facebook, I come to know that I have to pass image path (which I want to display) in image parameter of sharer.php. But still, it displays image related to that site. I don't know that where is my mistake. If anyone know answer then please explain or suggest me link from where I can understand from beginning. Thank You.
Here is my code.
<?php
$title = urlencode("How to Create a Custom Facebook Share Button with a Custom Counter");
$url = urlencode("http://www.daddydesign.com/wordpress/how-to-create-a-custom-facebook-share-button-with-a-custom-counter/");
$summary = urlencode("Learn how to create a custom Facebook 'Share' button, complete with a custom counter, for your website!");
$image = urlencode("http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg");
?>
<html>
<a id="button" onClick="window.open('http://www.facebook.com/sharer.php?s=100&p[title]=<?php echo $title; ?>&p[summary]=<?php echo $summary; ?>&p[url]=<?php echo $url; ?>&&p[images][0]=<?php echo $image; ?>', 'sharer', 'toolbar=0,status=0,width=550,height=400');" target="_parent" href="javascript: void(0)">
Click to Share
</a>
</html>
Your image http://www.daddydesign.com/ClientsTemp/Tutorials/custom-iframe-share-button/images/thumbnail.jpg is the problem - it's not actually an image but takes you to a regular webpage.
You need to set a specific image which fits facebook's size requirements, the minimum size is 200x200 pixels.
I am desperate on this.
I create a list with an image and some description and other data.
The image and the description should be linked the same way.
The description link(onclick event) work fine:
<?php echo (string)$flat.'<br />'; ?>
But around the image it doesn't:
<a href="#" onclick="show_object('<?php echo $itemId.','.$identifier; ?>');return false;">
<img src="<?php echo (string)$image_url; ?>" class="list_image"></img>
</a>
Why? I do not understand, I tried several other ways, with including the onclick into the image, making a span out of the a.. Nothing works.
If I click on the image, I see in the javascript console that the request get started, but it does not load the page.
I do not understand since the two requests are exact same and immitedly behind another (inside a table)
please help!
I think you are missing some quotes:
<a href="#" onclick="show_object('<?php echo $itemId."','".$identifier; ?>');return false;">
<img src="<?php echo (string)$image_url; ?>" class="list_image"></img>
</a>
In your version, you call show_object('someitemid,someidentifier') but you want to call show_object('someitemid','someidentifier') as you do in your first <a>-tag.
How is that "exactly the same" ?
"show_object('<?php echo $itemId."','".$identifier; ?>'); return false;"
"show_object('<?php echo $itemId.','.$identifier; ?>');return false;"
I suggest you double check the quotes, or copypaste the working one into the other, then come back to us if it's not fixed :)
I want to know is there an easy way in order to be able to place images in a loop as below in like a slider? The user sees first image in a slider and then by using arrows for example, be able to slide to next to next or previous image. If user is on last image and wants to go on next image, it displays the first image again. if user is on first image and click on previous, it goes on last image. So it stays continuous.
Below is code where if there are no images then it displays a blank but if there are images, then displays those images in a slider:
<?php
//start:procedure image
$img_result = '';
if(empty($arrImageFile[$key])){
$img_result = ' ';
}else{
?>
<?php foreach ($arrImageFile[$key] as $i) { ?>
<p><img alt="<?php echo $i; ?>" height="200" width="200" src="<?php echo 'ImageFiles/'.$i; ?>"></p>
<?php } ?>
<?php
}
//end:procedure image
A basic jquery slider is easy to implement with instructions of you fancy it: http://basic-slider.com/
Codrops is a nice site for front-end sollutions, I found this plugin that can maybe can help you, in this tutorial she teaches how to do it, and gives you a demo code too.
http://tympanus.net/codrops/2012/04/05/slideshow-with-jmpress-js/
Enjoy it!
I've searched and found out solutions to preload images IF I have their file names. However my gallery and images are dynamic so it runs a php echo image url code to call my images.
<a href="<?php echo $image->imageURL ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="
<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>"
<?php echo $image->size ?> />
<?php } ?></a>
What can I do to preload the next 2 or 3 images in the gallery since I wont be able to give the exact image file for each of my galleries. The only solution I found was to make all the images preload which I don't want.
You can probably hide your images when page load and you can run your preload image function
$('#gallery img').hide();
$('#gallery img').each(function(e) {
$(this).delay(500*e).fadeIn('slow');
})
I'm not clear as to what you're asking, but you can't load a resource without knowing it's path.
Also, I assume $image->size returns the string width="X" height="Y". You'll probably be better off having a height and width property, or store the dimensions in an array.
if($image->width) {
echo 'width="' . $image->width . '"';
}