HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Comcode page link with image rollover

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#89029 (In Topic #18024)
Avatar

Fan in action

No mouseover image change

HTTPS based site:
Using image as a page link: Initial image works, and the link works, but there's no 'rollover' image change.

Code

[codebox][page="standards:teachersonly"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]

Image paths valid.

"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Rating:
#89043
Avatar

Community saint

The rollover image need to be a fully qualified URL and not a relative path.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89047
Avatar

Fan in action

Thanks, Temp.
I'd tried the absolute, since I had noted that the javascript wasn't rendering the 'rollover' image source as fully qualified, but the main image was being rendered as absolute. As in the below 'rendered source' for two "page links". ​

Code



<span style="  font-size: 1.2em"><b>PSD Music Evidence Outcomes by Level</b></span>&nbsp;&nbsp;<a href="https://opusunita.us/esources/index.php?page=evoutcomes"><img style="vertical-align: bottom" src="https://opusunita.us/themes/Opus_Unita/images_custom/coda_s.png" title="Go To" alt="Go To">

    <script type="text/javascript">// <![CDATA[
        addEventListenerAbstract(window,'load',function () {
            create_rollover('rand31819','themes/Opus_Unita/images_custom/coda2_s.png');
        } );
    //]]></script></a>
<hr>
<span style="  font-size: 1.2em"><b>For Teachers only</b></span>&nbsp;&nbsp;<a href="https://opusunita.us/standards/index.php?page=teachersonly"><img style="vertical-align: bottom" src="https://opusunita.us/themes/Opus_Unita/images_custom/coda_s.png" title="Go To" alt="Go To">

    <script type="text/javascript">// <![CDATA[
        addEventListenerAbstract(window,'load',function () {
            create_rollover('rand5503','https://opusunita.us/themes/Opus_Unita/images_custom/coda2_s.png');
        } );
    //]]></script></a>

​From the comcode, using tag insert 'wizard'

Code

[codebox][font size="1.2em"]<b>PSD Music Evidence Outcomes by Level</b>[/font]&nbsp;&nbsp;[page="esources:evoutcomes"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page]
<hr />
[font size="1.2em"]<b>For Teachers only</b>[/font]&nbsp;&nbsp;[page="standards:teachersonly"] [img="Go To" align="bottom" title="Go To" rollover="https://opusunita.us/themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]

I'm wondering if this is javascript issue related to HTTPS based site /cross scripting?. I don't need the rollover effect for this, implemented it through the 'learning' curve, and noted it doesn't work, in this case of 'page links', haven't the straight-up 'image rollover' elsewhere... yet. Just inside the 'page link'.

"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Item has a rating of 5 (Liked by FletchLiked by JeanLiked by Chris GrahamLiked by Guest)  
Rating:
#89049
Avatar

Community saint

Its not a cross-site scripting issue, but you did find a bug.

The IMG tag is missing an id attribute. This can be fixed by editing the COMCODE_IMG.tpl template and changing:

Code

<img{+START,IF_NON_EMPTY,{ALIGN}} style="vertical-align: {ALIGN|}"{+END} src="{URL*}" title="{+START,IF_PASSED,TOOLTIP}{$STRIP_TAGS,{TOOLTIP}}{+END}{+START,IF_NON_PASSED,TOOLTIP}{$STRIP_TAGS,{CAPTION}}{+END}" alt="{$STRIP_TAGS,{CAPTION}}" />
to:

Code

<img{+START,IF_NON_EMPTY,{ALIGN}} style="vertical-align: {ALIGN|}"{+END} src="{URL*}" {+START,IF_PASSED,ROLLOVER}id="{$GET%,RAND_ID_IMG}"{+END} title="{+START,IF_PASSED,TOOLTIP}{$STRIP_TAGS,{TOOLTIP}}{+END}{+START,IF_NON_PASSED,TOOLTIP}{$STRIP_TAGS,{CAPTION}}{+END}" alt="{$STRIP_TAGS,{CAPTION}}" />

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Rating:
#89050
Avatar

Community saint

Almost forgot. The fact that the rollover doesn't resolve relative paths should be considered a bug also. If image can resolve a relative path then so should rollover.

Do you have a Samsung Galaxy S / Galaxy S II ? If so, why not check out my ScreenFree FM Radio .
Back to the top
 
Posted
Item has a rating of 5 (Liked by JeanLiked by Chris Graham)  
Rating:
#89059
Avatar

Fan in action

Yep! Great, Temp!
That got it working... for 'page links' right off the comcode link wizard... in order to get it working right for external links, I finally came up with a mish-mash of code... all kinds of xml validation probs otherwise, it seemed. Was Nuts! Screwy!
For external this is what resolves it, after changing the template code you gave:

Code

"some text defining the external page &nbsp;&nbsp"
<a href="url" title="whatever" target="_blank">
[img="Go To" align="bottom" title="Go To {!LINK_NEW_WINDOW}" rollover="Absolute URL to rollover image"]relative url to initial image[/img]
</a>
That produces the link image sequence I wanted, except:
accompanied by a tiny 'superscript' "external link" image with the link's title tooltip.

Since I didn't need or want that little thingy hovering by my link image,
and had the link "defining text" next to the image,
easiest/safest way to get rid of it for me was to go to
my theme's global.css
down about line 3980 under 'Link Type Display' classes
and comment out​

Code

a[target="_blank"] {background: url('{$IMG;,filetypes/external_link}') no-repeat right top; padding-right:10px;}

Thanks Temp!
Mike

"I think ...therefore I'm in a mess..."
Back to the top
 
Posted
Rating:
#89069
Avatar

Community saint

Well Done, Mike!
Thanks for sharing!
:thumbs:
Jean
Back to the top
 
Posted
Rating:
#89070
Avatar

Fan in action

Thank you, Jean...
I thought another newbie might want to know how to get rid of that superscript new window thingy...
That rollover fix is due to Temp1024 finding the fault in the template.

The crazy zoo of code possibilities for an old fool like me that I ran into trying to come up with that simple ext page linking nearly drove me back to drinking. Looks simple, now that's it there, doesn't it? duh.  But I couldn't get past the validation checks on page preview, and have it working, with anything else.
Gotta wonder how I could get so obsessed with something glitzy that wasn't even necessary to get the simple effect of 'go to' something 'from here'.

Now, moving on to real issues.... :( learning OCP, and getting that site set up instead of playin' with it.
Cheers!
Mike

"I think ...therefore I'm in a mess..."
Back to the top
 
Important!
Posted
Item has a rating of 5 (Liked by JeanLiked by Geano)  
Rating:
#89075
Avatar

Automated fix message

Geano said

HTTPS based site:
Using image as a page link: Initial image works, and the link works, but there's no 'rollover' image change.

Code

[codebox][page="standards:teachersonly"][img="Go To" align="bottom" title="Go To" rollover="themes/Opus_Unita/images_custom/coda2_s.png"]themes/Opus_Unita/images_custom/coda_s.png[/img] [/page][/codebox]

Image paths valid.
This issue has been filed on the tracker as issue #721, with a fix.


Become a fan of ocPortal on Facebook or add me as a friend. Add me on on Twitter.
Was I helpful?
  • If not, please let us know how we can do better (please try and propose any bigger ideas in such a way that they are fundable and scalable).
  • If so, please let others know about ocPortal whenever you see the opportunity.
  • If my reply is too Vulcan or expressed too much in business-strategy terms, and not particularly personal, I apologise. As a company & project maintainer, time is very limited to me, so usually when I write a reply I try and make it generic advice to all readers. I'm also naturally a joined-up thinker, so I always express my thoughts in combined business and technical terms. I recognise not everyone likes that, don't let my Vulcan-thinking stop you enjoying ocPortal on fun personal projects.
  • If my response can inspire a community tutorial, that's a great way of giving back to the project as a user.
Important!
 
Posted
Rating:
#89180
Avatar

Fan in action

Must be true, Chris never sleeps.:thumbs:

"I think ...therefore I'm in a mess..."
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: