How to get the title or another attribute of an Image in PHP

Question

I am building a custom shirt builder for a website http://mytempsite.net/gotie/mixandmatch

What I have setup is step one, they will select a shirt color from 12 different shirts and then move on to the next step where they will be able to choose a tie. I need to be able to pass a variable to that next page telling it to only pull images with ties on it for example the red shirt.

My thought of doing this is by having that attribute at the image alt or title tag and then getting that attribute from the current image that is being displayed.

What i need to know is how?

i tried using this code as a start

<?php
    $url=$this->helper('core/url')->getCurrentUrl();;

    $html = file_get_contents($url);

    $doc = new DOMDocument();
    @$doc->loadHTML($html);

    $divs = $doc->getElementByID('loadarea');

    foreach ($divs as $div) {
           echo "Found the loadarea div <br />";
    }
?>

but it didn't work, and it also caused my page to load really slowly.

just in case here is code to thumbnails

<?php 
    $products = Mage::getModel('catalog/product')->getCollection();

    foreach($products as $prod) {
        $product = Mage::getModel('catalog/product')->load($prod->getId());
        $pro_title = $product->getName();
        $img = $product->getImageUrl();

        echo "<a href='".$img."' title='".$pro_title."' rel='enlargeimage' rev='targetdiv:loadarea,enabletitle:no,trigger:click,preload:none,fx:fade'><img src='".$img."' width='100px'/></a>";

}?>

I hope that i worded this question correctly as to not be too localized. If so i will reword it.

Answer 1

What i ended up doing is when the thumbnail image gets clicked a hidden text box gets the product_id of that shirt and then when you go to the next page it automatically pulls the product image of that product. I have inserted the code for my entire form incase anyone ever needs to do this in the future :)

Happy Coding!

         <form id="GoTie_Builder" method="POST" action="/gotie/mixandmatch/tie">
                                <script>
                                function changeInput(pro_id)
                                {
                                    var my_form = document.getElementById('GoTie_Builder');
                                    my_form.shirt_color.value = pro_id;
                                }

                                function changePattern(pattern)
                                {
                                    var my_div = document.getElementById('shirt_zoom');
                                    my_div.innerHTML = '<img src="http://www.tuxedojunction.com/Content/Products/Vests/LegacyBlueVelvet_s_1.jpg" />';

                                }

                                </script>
                                <div id="shirt_zoom" style="width:300px; height:100px;">
                                <img src="http://www.tuxedojunction.com/Content/Products/Vests/LegacyBlueVelvet_s_1.jpg" />
                                </div>

                                <div class="Builder_thumbnails" style="float:left;">

                            <?php 
                                $cat_id = 8;
                                $products = Mage::getModel('catalog/category')->load($cat_id)->getProductCollection();
                                echo '<input id="shirt_color" type="text" name="shirt_color" value="0">';
                                foreach($products as $prod) {
                                    $product = Mage::getModel('catalog/product')->load($prod->getId());

                                    $pattern = $this->helper('catalog/image')->init($product, 'thumbnail');

                                    //echo "<img onclick='changeInput($pro_id)' class='product_thumbnail' src='".$pattern."' alt='".$pro_id."' width='100px'/>";


                                    $pro_id = $product->getId();
                                    $pro_title = $product->getName();
                                    $img = $product->getImageUrl();


                                    $input_id = "shirt_color";
                                    echo "<a href='".$img."' title='".$pro_title."' rel='enlargeimage' rev='targetdiv:loadarea,enabletitle:no,trigger:click,preload:none,fx:fade'><img onclick='changeInput($pro_id)' class='product_thumbnail' src='".$this->helper('catalog/image')->init($product, 'thumbnail')."' alt='".$pro_id."' width='100px' height='100px'/></a>";

         }?>

  </div>      


         <div id="loadarea" style="width:300px;top: 0px;right: 0px;float: right;position: relative;"><img src="http://cdn4.blackenterprise.com/wp-content/blogs.dir/1/files/2011/07/White-Shirt-620x480.jpg" width="500px;"/>

         </div>
         <input type="submit" value="Choose a Tie" />
         </form>

Answer 2

Ok, So basic points to clarify your question.

As I understand it you are trying to get a color (choice) and then to display certain images based on that choice.

If I understand what your asking. Here is one method.

Product images have Lables ( So is it spelled internally). What you need to do is to have multiple images per product. in the Lable have one with and one with out some extra text. Say 'Red Shirt - Tie'. Then you can go and load the correct image depending on if you need a '-tie' image or not.

Your question is kind of vague so this is the best I can come up with. My advise is to try and come back with more specific questions. Good Luck.